/* ==========================================
   Service Detail — Hero Section
   ========================================== */

.service-hero {
  --hero-top-space: 100px;
  padding-top: calc(var(--header-height, 0px) + var(--hero-top-space));
  padding-bottom: 100px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    280.52deg,
    var(--pearl-bush) -86.98%,
    var(--white) 63.16%
  );
  @media (max-width: 1179px) {
    --hero-top-space: 80px;
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    --hero-top-space: 60px;
    padding-bottom: 60px;
  }
}

.service-hero-bg,
.wedge-hero-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
  min-width: 2560px;
  @media (max-width: 767px) {
    display: none;
  }
}

.service-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.service-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  @media (max-width: 1179px) {
    gap: 24px;
  }
  @media (max-width: 767px) {
    gap: 20px;
  }
}

.service-hero-copy .title-section {
  max-width: 744px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.service-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  @media (max-width: 1179px) {
    max-width: 100%;
    margin-left: 0;
  }
  @media (max-width: 767px) {
    gap: 20px;
  }
}

.service-hero-description {
  font: var(--body-b1);
  color: var(--dark);
  margin: 0;
}

.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.service-hero-media {
  width: 100%;
  border-radius: var(--radius-12);
  overflow: hidden;
  @media (max-width: 767px) {
    border-radius: var(--radius-8);
  }
}

.service-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================
   Service Detail — Wedge Offering Hero
   ========================================== */

.wedge-hero {
  --hero-top-space: 100px;
  padding-top: calc(var(--header-height, 0px) + var(--hero-top-space));
  padding-bottom: 100px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    280.52deg,
    var(--pearl-bush) -86.98%,
    var(--white) 63.16%
  );
  z-index: 1;
  @media (max-width: 1179px) {
    --hero-top-space: 80px;
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    --hero-top-space: 60px;
    padding-bottom: 60px;
  }
}

/* Both columns stretch, so the row height comes from the copy column and the
   artwork squares off against it top and bottom. */
.wedge-hero-inner {
  display: grid;
  grid-template-columns: 1.082fr 1fr;
  align-items: stretch;
  gap: 24px;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
  }
  @media (max-width: 767px) {
    gap: 20px;
  }
}

.wedge-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.wedge-hero-copy .title-section {
  max-width: 100%;
}

/* Pinned to the bottom of the copy column — see the component header. */
.wedge-hero-card {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  border-radius: var(--radius-12);
  /* The artwork is a transparent texture, so it rides on the card's black
     rather than standing in for it. */
  background-color: var(--black);
  background-image: url("../images/wedge-service-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  @media (max-width: 1179px) {
    background-image: none;
  }
  @media (max-width: 767px) {
    gap: 24px;
    padding: 24px;
    border-radius: var(--radius-8);
  }
}

.wedge-hero-description {
  font: var(--body-b1);
  color: var(--gray);
  margin: 0;
}

.wedge-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.wedge-hero-media {
  border-radius: var(--radius-12);
  overflow: hidden;
  @media (max-width: 767px) {
    border-radius: var(--radius-8);
  }
}

/* Stretched to the column on desktop; once the columns stack there is no
   sibling to match, so the image falls back to a fixed ratio. */
.wedge-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  @media (max-width: 1179px) {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* the problem section  css*/
.the-problem-section {
  padding: 100px 0;
  background-color: var(--white);
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.the-problem-section-wrapper {
  display: flex;
  flex-direction: column;
  gap: 100px;
  @media (max-width: 1179px) {
    gap: 80px;
  }
  @media (max-width: 767px) {
    gap: 60px;
  }
}

.the-problem-section-wrapper .about-problem-bottom-section {
  padding-bottom: 100px;
  border-bottom: 1px solid var(--stone);
  @media (max-width: 1179px) {
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    padding-bottom: 60px;
  }
}

.the-problem-section-wrapper .about-problem-bottom-section .title-section {
  max-width: 720px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.the-problem-section-wrapper
  .about-problem-bottom-section
  .about-problem-bottom-description {
  max-width: 552px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

/* ==========================================
   Service Detail — Capabilities
   ========================================== */

.service-capabilities {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

/* Six tracks rather than three, so a card can take a third of the row (span 2),
   a half (span 3) or all of it (span 6). That is what lets a short final row —
   5 cards, 7 cards — widen to fill the width instead of ending ragged. */
.service-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  @media (max-width: 1179px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.service-capabilities-heading {
  z-index: 1;
}

.service-capabilities-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column: span 2;
  padding: 32px;
  background-color: var(--pearl);
  border-radius: var(--radius-12);
  z-index: 1;
  @media (max-width: 1179px) {
    grid-column: auto;
    padding: 28px;
  }
  @media (max-width: 767px) {
    padding: 24px;
  }
}

/* Three-up only: the leftovers on an incomplete last row share it evenly.
   Two leftovers take a half each; a lone one takes the whole row. */
@media (min-width: 1180px) {
  .service-capabilities-card:nth-child(3n + 1):nth-last-child(2),
  .service-capabilities-card:nth-child(3n + 2):last-child {
    grid-column: span 3;
  }

  .service-capabilities-card:nth-child(3n + 1):last-child {
    grid-column: span 6;
  }
}

/* Same idea two-up: a card left alone on the last row spans both columns. */
@media (max-width: 1179px) and (min-width: 768px) {
  .service-capabilities-card:nth-child(odd):last-child {
    grid-column: span 2;
  }
}

.service-capabilities-icon {
  display: inline-flex;
  margin-bottom: 32px;
  @media (max-width: 1179px) {
    margin-bottom: 28px;
  }
  @media (max-width: 767px) {
    margin-bottom: 24px;
  }
}

.service-capabilities-icon svg {
  display: block;
  width: 42px;
  height: 42px;
  @media (max-width: 767px) {
    width: 38px;
    height: 38px;
  }
}

.service-capabilities-card-title {
  font: var(--heading-h5);
  color: var(--off-black);
  letter-spacing: var(--letter-spacing-m1);
  margin: 0 0 18px;
  @media (max-width: 1179px) {
    margin-bottom: 16px;
  }
  @media (max-width: 767px) {
    margin-bottom: 12px;
  }
}

.service-capabilities-card-text {
  font: var(--body-b2);
  color: var(--graphite);
  margin: 0;
}

/* ==========================================
   Service Detail — Our Approach
   ========================================== */

.service-approach {
  display: grid;
  grid-template-columns: 1.007fr 1fr;
  gap: 60px;
  z-index: 1;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.service-approach-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 24px;
  }
  @media (max-width: 767px) {
    gap: 20px;
  }
}

.service-approach-description {
  font: var(--body-b2);
  color: var(--off-black);
  max-width: 620px;
  margin: 0;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.service-approach-media {
  max-width: 528px;
  width: 100%;
  padding-top: 48px;
  margin-left: auto;
  @media (max-width: 1179px) {
    max-width: 100%;
    margin-left: 0;
    padding-top: 0;
  }
}

.service-approach-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-12);
  @media (max-width: 1179px) {
    height: auto;
    max-height: unset;
  }
  @media (max-width: 767px) {
    border-radius: var(--radius-8);
  }
}

.service-problem-bottom-bg {
  position: absolute;
  left: 0;
  width: 100%;
  top: -16.5%;
  pointer-events: none;
  @media (max-width: 1179px) {
    display: none;
  }
}

.service-problem-bottom-bg img {
  width: 100%;
  height: 100%;
  max-height: 2803px;
  pointer-events: none;
}

/* connected section */

.connected-section {
  padding: 100px 0;
  background-color: var(--pearl);
  position: relative;
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.connected-section-inner {
  display: grid;
  grid-template-columns: 1fr 422px;
  gap: 60px;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.connected-section-inner .title-section {
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.connected-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: flex-end;
}

.connected-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-8);
  background-color: var(--white);
  text-decoration: none;
}

.connected-link-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.connected-link-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.connected-link-text {
  font: var(--body-b3);
  color: var(--off-black);
  flex: 1;
}

.connected-link-arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--off-black);
}

.connected-link-arrow svg path {
  fill: var(--off-black);
}

.connected-link-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease-in-out;
}

.connected-link:hover .connected-link-arrow svg {
  transform: rotate(-45deg);
}

/* ==========================================
   Service Detail — What's Included
   ========================================== */

.whats-included-section {
  padding: 100px 0;
  background-color: var(--white);
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.whats-included-wrapper {
  display: flex;
  flex-direction: column;
  gap: 100px;
  @media (max-width: 1179px) {
    gap: 80px;
  }
  @media (max-width: 767px) {
    gap: 60px;
  }
}

/* ---- 1. What's included ---- */

.included-top {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: start;
  gap: 80px;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--stone);
  @media (max-width: 1179px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    gap: 40px;
    padding-bottom: 60px;
  }
}

.included-heading {
  align-self: start;
  position: sticky;
  top: calc(var(--header-height, 80px) + 15px);
  @media (max-width: 1179px) {
    position: static;
    max-width: 100%;
  }
}

.included-list {
  padding-top: 64px;
  @media (max-width: 1179px) {
    padding-top: 0;
  }
}

.included-item + .included-item {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--stone);
  @media (max-width: 1179px) {
    margin-top: 24px;
    padding-top: 24px;
  }
  @media (max-width: 767px) {
    margin-top: 20px;
    padding-top: 20px;
  }
}

.included-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  @media (max-width: 767px) {
    gap: 16px;
  }
}

.included-item-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media (max-width: 1179px) {
    gap: 12px;
  }
}

.included-item-number {
  flex-shrink: 0;
  font: var(--heading-h6);
  color: var(--dark);
  letter-spacing: var(--letter-spacing-m0-5);
  margin-top: 3px;
  @media (max-width: 767px) {
    margin-top: 2px;
  }
}

.included-item-title {
  font: var(--heading-h5);
  color: var(--dark);
  letter-spacing: var(--letter-spacing-m1);
  margin: 0;
  min-width: 0;
}

.included-item-text {
  font: var(--body-b3);
  color: var(--graphite);
  margin: 0;
}

.included-item-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.included-item-bullets li {
  position: relative;
  font: var(--body-b3);
  color: var(--graphite);
  padding-left: 24px;
  @media (max-width: 767px) {
    padding-left: 20px;
  }
}

.included-item-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--burnt-orange) 0%,
    var(--light-orange) 100%
  );
  border-radius: var(--radius-1);
  @media (max-width: 1179px) {
    top: 9px;
  }
  @media (max-width: 767px) {
    top: 8px;
    width: 6px;
    height: 6px;
  }
}

/* ---- 2. In practice ---- */
.whats-included-wrapper .exception-block {
  padding-top: 0;
}

.exception-title-section {
  max-width: 620px;
}

/* ---- 3. Built for ---- */

.builtfor-block {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.builtfor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(418px, 1fr));
  gap: 24px;
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.builtfor-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--radius-12);
  background-color: var(--pearl);
  text-decoration: none;
  transition: background-color 0.3s ease;
  @media (max-width: 1179px) {
    padding: 28px;
  }
  @media (max-width: 767px) {
    padding: 24px;
  }
}

.builtfor-card-icon {
  display: inline-flex;
  margin-bottom: 24px;
  @media (max-width: 1179px) {
    margin-bottom: 20px;
  }
  @media (max-width: 767px) {
    margin-bottom: 16px;
  }
}

.builtfor-card-icon svg {
  display: block;
  width: 36px;
  height: 36px;
  @media (max-width: 767px) {
    width: 32px;
    height: 32px;
  }
}

.builtfor-card-title {
  font: var(--heading-h5);
  color: var(--dark);
  letter-spacing: var(--letter-spacing-m0-5);
  margin: 0 0 18px;
  @media (max-width: 767px) {
    margin: 0 0 12px;
  }
}

.builtfor-card-text {
  font: var(--body-b2);
  color: var(--graphite);
  margin: 0 0 24px;
  @media (max-width: 1179px) {
    margin-bottom: 20px;
  }
  @media (max-width: 767px) {
    margin-bottom: 16px;
  }
}

.builtfor-card-link {
  display: block;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--stone);
  font: var(--button);
  color: var(--burnt-orange);
  @media (max-width: 1179px) {
    padding-top: 20px;
  }
  @media (max-width: 767px) {
    padding-top: 16px;
  }
}

.builtfor-card-link .link-component {
  display: block;
  gap: 0;
  font: var(--button);
}

.builtfor-card-link .link-lastword {
  white-space: nowrap;
}

.builtfor-card-link .link-arrow {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
}

.builtfor-card-link .link-arrow svg {
  display: inline-flex;
  vertical-align: middle;
}

.builtfor-card:hover {
  background-color: var(--ash);
}

.builtfor-card:hover .link-arrow svg {
  transform: rotate(-45deg);
}