/* pages.css
   Styles for inner pages (services and, later, blog).
   Loads after style.css. Adds new classes, plus one deliberate homepage
   override at the end of this file (the "What we do" backdrop). */

/* Layout ------------------------------------------------------------- */

.page-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-section {
  padding: 55px 0;
}

.page-section.tight {
  padding: 40px 0;
}

/* Dark band, matching the homepage "What we do" gradient. */
.page-section.dark {
  background: linear-gradient(#040d15 14.3546%, #0b1b27 100%);
}

.page-section.dark .block-title {
  color: var(--secondary-text-color);
}

.page-section.dark .prose p {
  color: #c9d1d2;
}

.page-section.dark .prose strong {
  color: var(--secondary-text-color);
}

.page-section.dark .page-list li {
  color: #c9d1d2;
}

.page-section.dark .page-list .list-title {
  color: var(--secondary-text-color);
}

.page-section.dark .page-list .list-mark {
  color: var(--secondary-text-color);
}

.page-section.grey {
  background: var(--light-gray);
}

/* Page hero ---------------------------------------------------------- */

.page-hero {
  background-color: #040d15;
  background-image: url("../img/hero-bg.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 0 70px;
  position: relative;
  overflow: hidden;
}

/* Keeps white text legible wherever the photograph crops. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 13, 21, 0.94) 0%,
    rgba(4, 13, 21, 0.78) 50%,
    rgba(11, 27, 39, 0.55) 100%
  );
  z-index: 1;
}

.page-hero-shape {
  position: absolute;
  top: -140px;
  right: -180px;
  width: 760px;
  max-width: 72%;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;

  /* Fades the left edge of the shape so it sits behind the heading. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 30%,
    #000 60%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 30%,
    #000 60%
  );
}

.page-hero-shape img {
  display: block;
  width: 100%;
  height: auto;
}

.page-hero .page-wrap {
  position: relative;
  z-index: 2;
}

.page-eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--highlighted-text-color);
  line-height: 1.2;
  margin-bottom: 18px;
}

.page-title {
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  color: var(--secondary-text-color);
  max-width: 760px;
}

.page-lead {
  font-size: 20px;
  line-height: 1.4;
  color: var(--secondary-text-color);
  max-width: 680px;
  margin-top: 24px;
}

/* Prose -------------------------------------------------------------- */

.block-title {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--primary-text-color);
  margin-bottom: 18px;
}

.page-hero + .page-section .block-title {
  margin-top: 0;
}

.prose p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--tertiary-text-color);
  margin-bottom: 14px;
  max-width: 760px;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--primary-text-color);
  font-weight: 700;
}

/* Marked lists ------------------------------------------------------- */

/* Mirrors .services-list / .service-item / .service-icon on the homepage.
   align-items stays flex-start because these rows wrap over several lines,
   where the homepage rows are single-line and centred. */
.page-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 10px;
}

.page-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 20px;
  line-height: 1.35;
  color: var(--tertiary-text-color);
}

.page-list .list-mark {
  flex-shrink: 0;
  width: 49px;
  height: 48px;
  border: 1.5px dashed var(--highlighted-text-color);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--highlighted-text-color);
  transition: all 0.3s ease;
}

.page-list li:hover .list-mark {
  background: var(--highlighted-text-color);
  border-color: transparent;
  color: var(--secondary-text-color);
}

.page-list .list-title {
  color: var(--primary-text-color);
  font-weight: 700;
}

/* Cards ------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e6e6;
  border-radius: 18px;
  padding: 30px 28px;
  background: #ffffff;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}

.card:hover {
  border-color: var(--highlighted-text-color);
  transform: translateY(-4px);
}

.card-number {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--highlighted-text-color);
  margin-bottom: 16px;
  line-height: 1.2;
}

.card-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--primary-text-color);
  margin-bottom: 14px;
}

.card-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--tertiary-text-color);
  margin-bottom: 24px;
  flex-grow: 1;
}

.card-link {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-text-color);
  border-bottom: 2px solid var(--highlighted-text-color);
  padding-bottom: 4px;
  width: max-content;
}

.card-link:hover {
  color: var(--highlighted-text-color);
}

/* Page CTA ----------------------------------------------------------- */

.page-cta {
  background: radial-gradient(50% 50%, #043247 19.6861%, #09161f 89.337% 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}

.page-cta-shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-cta-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.page-cta .page-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* Matches .cta-title on the homepage: 50px, weight 900, uppercase. */
.page-cta-title {
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  color: var(--secondary-text-color);
  text-transform: uppercase;
  max-width: 680px;
}

.page-cta-title .highlight {
  color: var(--highlighted-text-color);
}

/* Matches .cta-subtitle on the homepage: 20px, weight 900, sentence case. */
.page-cta-text {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: var(--secondary-text-color);
  margin: 35px 0;
  max-width: 620px;
}

/* Breadcrumb and next links ------------------------------------------ */

.breadcrumb {
  font-size: 15px;
  color: #8fa3ab;
  margin-bottom: 22px;
  line-height: 1.4;
}

.breadcrumb a {
  color: #8fa3ab;
}

.breadcrumb a:hover {
  color: var(--highlighted-text-color);
}

.next-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.next-link {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-text-color);
  border-bottom: 2px solid var(--highlighted-text-color);
  padding-bottom: 4px;
}

.next-link:hover {
  color: var(--highlighted-text-color);
}

/* Links inside the homepage service list ------------------------------ */

.service-text a {
  color: var(--secondary-text-color);
  font-weight: 700;
  border-bottom: 1px solid var(--highlighted-text-color);
  padding-bottom: 2px;
  transition: color 0.3s ease;
}

.service-text a:hover {
  color: var(--highlighted-text-color);
}

/* Active nav state ---------------------------------------------------- */

.nav-link[aria-current="page"] {
  border-bottom: 1px solid var(--highlighted-text-color);
}

.nav-link.variant-2[aria-current="page"] {
  border-bottom: none;
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 50px 0 45px;
  }

  .page-hero-shape {
    top: -70px;
    right: -120px;
    width: 420px;
    opacity: 0.4;
  }

  /* At this width the shape image fills the whole CTA band and sits directly
     behind the white heading, so it drops back to a texture. */
  .page-cta-shape {
    opacity: 0.35;
  }

  .page-title {
    font-size: 34px;
  }

  .page-lead,
  .prose p,
  .page-list li {
    font-size: 17px;
  }

  .page-list .list-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .page-list li {
    gap: 14px;
  }

  .page-section {
    padding: 45px 0;
  }

  .block-title {
    font-size: 26px;
  }

}


/* Homepage: "What we do" backdrop ------------------------------------- */
/* The decorative shape is hidden rather than deleted from the markup,
   because main.js applies a scroll transform to .services-shape and would
   throw on a missing element, which stops the later scroll handlers.
   Delete these two rules to bring the graphic back. */

.services-shape {
  display: none;
}

/* With the shape gone, .services-right would sit hard against the right
   edge (it carries margin-left: auto in style.css). Centre it instead. */

.services-right {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .services-right {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Homepage CTA breakpoint, mirrored for the inner-page CTA. */
@media (max-width: 480px) {
  .page-cta-title {
    font-size: 38px;
  }

  .page-cta-text {
    font-size: 18px;
  }
}


/* Binary code line above service card titles */
.card-code {
  font-family: "DM Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #1a7385;
  margin-bottom: 8px;
}


/* Binary code line above section headings: bright teal on dark bands, centred over the homepage about heading */
.page-section.dark .card-code {
  color: #35b7cd;
}

.services .section-code {
  color: #35b7cd;
}

.about .section-code {
  text-align: center;
}