/* ==========================================
   PROJECTS PAGE — HERO SECTION
========================================== */

.projects-hero {
  --projects-accent: #ea0044;
  --projects-heading: #fafafa;
  --projects-muted: #b8b8b8;

  width: 100%;
  min-width: 0;

  padding: 144px 0 0;

  position: relative;

  color: var(--projects-heading);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.projects-hero,
.projects-hero *,
.projects-hero *::before,
.projects-hero *::after {
  box-sizing: border-box;
}

/* ==========================================
   INNER CONTAINER
========================================== */

.projects-hero .projects-hero__inner {
  width: 100%;
  max-width: 580px;
  min-width: 0;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 24px;

  text-align: center;
}

/* ==========================================
   HERO HEADING
========================================== */

.projects-hero .projects-hero__heading {
  width: 100%;
  margin: 0;

  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;

  color: var(--projects-heading);

  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.projects-hero .projects-hero__word {
  display: inline-block;
}

.projects-hero .projects-hero__word--accent {
  color: var(--projects-accent);
}

/* ==========================================
   HEADING REVEAL ANIMATION
   Same as existing About / Services
========================================== */

.projects-hero .projects-hero__heading.is-ready .projects-hero__word {
  opacity: 0.001;
  transform: translateY(10px);

  transition:
    opacity 0.9s cubic-bezier(0.55, 0.01, 0.2, 1),
    transform 0.9s cubic-bezier(0.55, 0.01, 0.2, 1);

  transition-delay: var(--projects-word-delay, 0s);
}

.projects-hero .projects-hero__heading.is-visible .projects-hero__word {
  opacity: 1;
  transform: none;
}

/* ==========================================
   DESCRIPTION
========================================== */

.projects-hero .projects-hero__description {
  width: 100%;
  max-width: 580px;

  margin: 0;

  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;

  color: var(--projects-muted);

  text-align: center;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Description Entrance */

.projects-hero .projects-hero__description.is-ready {
  opacity: 0;
  transform: translateY(10px);

  transition:
    opacity 0.9s cubic-bezier(0.55, 0.01, 0.2, 1),
    transform 0.9s cubic-bezier(0.55, 0.01, 0.2, 1);

  transition-delay: 0.35s;
}

.projects-hero .projects-hero__description.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================
   TABLET
   769px — 1024px
========================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .projects-hero {
    padding-top: 144px;
  }

  .projects-hero .projects-hero__heading {
    font-size: 60px;
  }

  .projects-hero .projects-hero__description {
    font-size: 20px;
  }
}

/* ==========================================
   MOBILE
   Same breakpoint as existing website
========================================== */

@media (max-width: 768px) {
  .projects-hero {
    padding-top: 128px;
  }

  .projects-hero .projects-hero__inner {
    width: 100%;
    gap: 24px;
  }

  .projects-hero .projects-hero__heading {
    font-size: clamp(32px, 8.5vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .projects-hero .projects-hero__description {
    font-size: 18px;
    line-height: 1.3;
  }
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {
  .projects-hero .projects-hero__heading.is-ready .projects-hero__word,
  .projects-hero .projects-hero__description.is-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================
   PROJECTS — CLIENT TRUST SECTION
========================================== */

.projects-client-trust {
  width: 100%;
  min-width: 0;

  margin-top: 10px;

  position: relative;
  isolation: isolate;
}

/* ==========================================
   DIVIDER
   Reference layout: Top border only
========================================== */

.projects-client-trust::after {
  display: none;
}

/* ==========================================
   INNER LAYOUT
   Uses existing client-trust structure
========================================== */

.projects-client-trust .client-trust__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 32px;
  padding: 32px 0;
}

/* ==========================================
   TRUSTED BY MANY TEXT
========================================== */

.projects-client-trust .projects-client-trust__title {
  flex: 0 0 auto;

  margin: 0;

  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;

  color: #b8b8b8;

  white-space: nowrap;
}

.projects-client-trust .projects-client-trust__title strong {
  font-weight: 700;
  color: inherit;
}

/* ==========================================
   LOGO CONTAINER
   Original homepage dimensions
========================================== */

.projects-client-trust .client-trust__logos {
  flex: 1 1 0;
  min-width: 0;
}

/*
   Marquee styling inherited from style.css:

   Logo height: 30px
   Logo gap: 57px
   Opacity: 0.7
   Gradient mask: same as homepage
   Drag and momentum: animations.js
*/

/* ==========================================
   TABLET
========================================== */

/* Homepage Responsive Breakpoint */
@media (max-width: 768px) {
  .projects-client-trust .projects-client-trust__title {
    font-size: 18px;
  }
}

/* ==========================================
   MOBILE / SMALL TABLET
   Existing website breakpoint
========================================== */

@media (max-width: 768px) {
  .projects-client-trust {
    margin-top: 10px;
  }

  .projects-client-trust .client-trust__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 32px;
    padding: 32px 0;
  }

  .projects-client-trust .projects-client-trust__title {
    width: 100%;

    text-align: center;
    white-space: normal;
  }

  .projects-client-trust .client-trust__logos {
    flex: none;
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================
   PROJECTS — SCHEDULE CALL
========================================== */

.projects-schedule {
  --client-accent: #ffffff;
  --client-surface: #ea0044;

  --ps-accent: #ea0044;
  --ps-border: #2b2b2b;
  --ps-text: #ffffff;

  width: 100%;
  min-width: 0;

  padding: 64px 0;

  position: relative;
  isolation: isolate;

  font-family: "Roboto", Arial, Helvetica, sans-serif;
  color: var(--ps-text);
}

.projects-schedule,
.projects-schedule *,
.projects-schedule *::before,
.projects-schedule *::after {
  box-sizing: border-box;
}

/* ==========================================
   TOP DIVIDER
   Same as existing website sections
========================================== */

.projects-schedule::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 0;

  border: 0;
  border-top: 1px solid var(--ps-border);

  border-image-source: linear-gradient(
    to right,
    var(--ps-border),
    var(--ps-border)
  );

  border-image-slice: 1;
  border-image-width: 1 0 0;
  border-image-outset: 0 100vmax;
  border-image-repeat: stretch;

  pointer-events: none;
}

@media (width > 1920px) {
  .projects-schedule::before {
    left: 50%;
    transform: translateX(-50%);

    width: 1920px;

    border-image-source: linear-gradient(
      to right,
      transparent 0%,
      var(--ps-border) 15%,
      var(--ps-border) 85%,
      transparent 100%
    );

    border-image-outset: 0;
  }
}

/* ==========================================
   SCHEDULE CARD
========================================== */

.projects-schedule .projects-schedule__card {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 32px;

  padding: 64px 32px;

  position: relative;

  background: var(--ps-accent);

  border: 1px solid rgba(222, 222, 222, 0.5);
  border-radius: 20px;

  box-shadow:
    0 0.597144px 0.597144px -0.9375px rgb(0 0 0 / 7%),
    0 1.81088px 1.81088px -1.875px rgb(0 0 0 / 7%),
    0 4.78699px 4.78699px -2.8125px rgb(0 0 0 / 6%),
    0 15px 15px -3.75px rgb(0 0 0 / 3%);
}

/* ==========================================
   INTRO
========================================== */

.projects-schedule .projects-schedule__intro {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 24px;
}

/* ==========================================
   HAPPY CLIENTS
   Reuses homepage client-trust classes
========================================== */

.projects-schedule .client-trust__proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;
  padding-right: 0;
}

.projects-schedule .client-trust__avatars {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 22px;
  padding: 0 16px;
}

.projects-schedule .client-trust__avatar-slot {
  flex: 0 0 1px;
  width: 1px;
  height: 44px;
  position: relative;
}

/* Image size, circular shape, border and
   animation come from homepage CSS. */

.projects-schedule .client-trust__caption {
  align-items: center;
  text-align: center;
}

/* White Stars on Pink Background */

.projects-schedule .client-trust__stars {
  color: #ffffff;
  justify-content: center;
}

/* Same typography as homepage */

.projects-schedule .client-trust__label {
  color: #dedede;
}

/* ==========================================
   HEADING
   Same site typography
========================================== */

.projects-schedule .projects-schedule__heading {
  width: 100%;
  min-width: 0;
  margin: 0;

  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;

  color: #ffffff;

  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.projects-schedule .projects-schedule__heading span {
  display: block;
}

/* ==========================================
   BUTTON + LOGO
========================================== */

.projects-schedule .projects-schedule__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 18px;

  width: fit-content;
  max-width: 100%;
}

/* ==========================================
   SCHEDULE BUTTON
   Same styling as homepage FAQ button
========================================== */

.projects-schedule .projects-schedule__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 44px;
  max-width: 100%;

  padding: 8px 16px;

  border: 0;
  border-radius: 24px;

  background: #141316;
  color: #ffffff;

  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.12;

  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0 0.48175px 0.86715px -1.16667px rgba(10, 10, 10, 0.68),
    0 1.83083px 3.29549px -2.33333px rgba(10, 10, 10, 0.61),
    0 8px 14.4px -3.5px rgba(10, 10, 10, 0.3),
    inset 0.318477px 0.437906px 0.108294px -1.1875px rgba(255, 255, 255, 0.18),
    inset 0.965802px 1.32798px 0.328408px -2.375px rgba(255, 255, 255, 0.17),
    inset 2.55306px 3.51046px 0.868135px -3.5625px rgba(255, 255, 255, 0.13),
    inset 8px 11px 2.72029px -4.75px rgba(255, 255, 255, 0.01);

  transition: box-shadow 0.5s ease;
}

.projects-schedule .projects-schedule__button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.projects-schedule .projects-schedule__button-icon {
  display: block;
  flex: none;

  width: 18px;
  height: 18px;
}

/* Same hover shadow as homepage */

@media (hover: hover) and (pointer: fine) {
  .projects-schedule .projects-schedule__button:hover {
    box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, 0.4),
      0 0 0 1px #828282;
  }
}

/* ==========================================
   CAL.COM LOGO
========================================== */

.projects-schedule .projects-schedule__cal-logo {
  display: block;
  flex: none;

  width: 61px;
  height: 13px;

  fill: #f7f7f7;
}

/* ==========================================
   TABLET
========================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .projects-schedule .projects-schedule__heading {
    font-size: clamp(44px, 5vw, 60px);
  }
}

/* ==========================================
   MOBILE
   Same breakpoint as existing website
========================================== */

@media (max-width: 768px) {
  .projects-schedule {
    padding: 48px 0;
  }

  .projects-schedule .projects-schedule__card {
    padding: 32px 16px;
    gap: 32px;
  }

  .projects-schedule .projects-schedule__intro {
    gap: 24px;
  }

  .projects-schedule .projects-schedule__heading {
    font-size: clamp(32px, 8.5vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {
  .projects-schedule .client-trust__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .projects-schedule .projects-schedule__button {
    transition: none;
  }
}

/* ==========================================
   SCHEDULE CALL — CLIENT PROOF FIX
========================================== */

/* Desktop & Tablet */
@media (min-width: 769px) {
  .projects-schedule .client-trust__proof {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .projects-schedule .client-trust__caption {
    align-items: flex-start;
    text-align: left;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .projects-schedule .client-trust__proof {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .projects-schedule .client-trust__caption {
    align-items: center;
    text-align: center;
  }
}

/* Active Work Link — Projects Page */

.navbar .nav-links > a[href="projects.html"] {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}