/* ======================================================================
   WHITE-LABEL SERVICES — BESPOKE SOLUTION PAGE
   Graduated off the shared partials/solution-page.blade.php — the last
   of the four /solutions/[slug] pages to do so, joining Insight 360X /
   DecisionDesk AI / Real-time BI / AI over BI / AI Agents. All copy is
   the real content the shared partial rendered — this file only
   changes presentation. Page-scoped .wl-* classes throughout.
   ====================================================================== */

.wl-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.wl-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.wl-caps-head {
  max-width: 56ch;
}

.wl-section-title {
  max-width: 22ch;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent-2);
}

/* ============================ CAPABILITIES ==============================
   A delivery manifest — the six real capabilities as a checklist under
   an NDA-protected header, styled like the one-pager a partner would
   actually receive, not an icon grid. */

.wl-caps {
  padding: 100px 0 108px;
  background: #ffffff;
}

@media (max-width: 767px) {
  .wl-caps {
    padding: 76px 0 84px;
  }
}

.wl-manifest {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 48px 0 0;
  border: 1px solid #e5ebf1;
  border-radius: 20px;
  background: #ffffff;
}

/* Rotated ribbon stamp — a marketing flourish, not a real legal mark,
   but it does the job a checkmark list can't: it makes the section
   feel like an actual confidential document instead of a features
   panel. */
.wl-manifest__stamp {
  position: absolute;
  top: 22px;
  right: -34px;
  z-index: 1;
  width: 150px;
  padding: 5px 0;
  transform: rotate(38deg);
  background: var(--accent-2);
  color: var(--accent-1);
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wl-manifest__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 28px;
  border-bottom: 1px solid #e5ebf1;
  background: var(--page-bg);
}

.wl-manifest__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-2);
}

.wl-manifest__count {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(15, 45, 73, 0.4);
}

.wl-manifest__list {
  display: flex;
  flex-direction: column;
  padding: 6px 28px;
}

.wl-manifest__clause {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #e5ebf1;
}

.wl-manifest__list .wl-manifest__clause:first-child {
  border-top: none;
}

.wl-manifest__clause-num {
  flex: none;
  width: 34px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

.wl-manifest__clause-text {
  margin: 0;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.65);
}

/* Wide viewports: a real two-column document page instead of one
   narrow column with the rest of the panel sitting empty. */
@media (min-width: 900px) {
  .wl-manifest__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
  }

  .wl-manifest__clause:nth-child(1),
  .wl-manifest__clause:nth-child(2) {
    border-top: none;
  }

  .wl-manifest__clause:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid #e5ebf1;
  }
}

.wl-manifest__clause-text strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-2);
}

@media (max-width: 639px) {
  .wl-manifest__header {
    padding: 18px 20px;
  }

  .wl-manifest__list {
    padding: 4px 20px;
  }

  .wl-manifest__stamp {
    top: 16px;
    right: -38px;
    width: 130px;
    font-size: 9.5px;
  }
}

/* ============================ HOW IT WORKS ===============================
   A horizontal pipeline that closes into a loop — three steps, then a
   curved arrow carrying back to step one labelled "repeat for your next
   client." The point of this page is repeatability across clients, so
   the diagram says that instead of just ending at step three like every
   other page's process section does. */

.wl-how {
  padding: 100px 0 108px;
  background: var(--page-bg);
}

@media (max-width: 767px) {
  .wl-how {
    padding: 76px 0 84px;
  }
}

.wl-how-head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.wl-how-head .wl-eyebrow {
  justify-content: center;
}

.wl-how-title {
  margin: 18px auto 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent-2);
}

.wl-how-lede {
  margin: 16px auto 0;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.65);
}

.wl-how-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin: 48px 0 0;
}

@media (min-width: 1024px) {
  .wl-how-flow {
    flex-direction: row;
    gap: 0;
  }
}

.wl-how-step {
  flex: 1;
  padding: 32px 28px;
  border: 1px solid #e5ebf1;
  border-radius: 20px;
  background: #ffffff;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease;
}

.wl-how-step:hover {
  transform: translateY(-3px);
  border-color: rgba(204, 191, 147, 0.6);
}

.wl-how-step__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-1);
}

.wl-how-step__name {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-2);
}

.wl-how-step__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15, 45, 73, 0.6);
}

.wl-how-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.wl-how-step__tags li {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--page-bg);
  border: 1px solid #e5ebf1;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 500;
}

.wl-how-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: rgba(15, 45, 73, 0.25);
  transform: rotate(90deg);
}

.wl-how-flow__arrow svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 1024px) {
  .wl-how-flow__arrow {
    width: 44px;
    transform: none;
  }
}

/* --- The loop-back: a curved arc under the row on desktop, a plain
   badge on its own (no room for a curve) on mobile. --- */
.wl-how-loop {
  position: relative;
  display: none;
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .wl-how-loop {
    display: block;
    height: 60px;
  }
}

.wl-how-loop__arc {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(204, 191, 147, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wl-how-loop__badge {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(204, 191, 147, 0.4);
  background: #ffffff;
  color: var(--accent-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.wl-how-loop__badge svg {
  width: 14px;
  height: 14px;
  color: var(--accent-1);
}

/* Mobile: no arc room, so the badge sits centred on its own as a plain
   closing note under the three steps — the arc SVG itself stays hidden,
   only the badge shows. */
@media (max-width: 1023px) {
  .wl-how-flow + .wl-how-loop {
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }

  .wl-how-loop__arc {
    display: none;
  }

  .wl-how-loop__badge {
    position: static;
    transform: none;
    white-space: normal;
    text-align: center;
  }
}

.wl-how-cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 32px auto 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-2);
}

.wl-how-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms ease;
}

.wl-how-cta:hover svg {
  transform: translateX(3px);
}

/* ============================ WHO IT'S FOR ===============================
   Photo focus-cards — same grammar as the other bespoke solution pages. */

.wl-who {
  padding: 100px 0 108px;
  background: #ffffff;
}

@media (max-width: 767px) {
  .wl-who {
    padding: 76px 0 84px;
  }
}

.wl-focus-grid {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .wl-focus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wl-focus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 26px;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--accent-2);
  background-image: var(--card-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wl-focus-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 19, 31, 0.1) 0%,
    rgba(6, 19, 31, 0.1) 30%,
    rgba(6, 19, 31, 0.72) 62%,
    rgba(6, 19, 31, 0.96) 100%
  );
}

.wl-focus-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 31, 0);
  transition: background-color 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.wl-focus-card:hover::after {
  background: rgba(6, 19, 31, 0.16);
}

.wl-focus-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wl-focus-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.wl-focus-card__text {
  max-width: 32ch;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* ============================ FAQ ========================================
   Left sticky intro + right accordion — same split-column grammar used
   across the other bespoke solution pages. */

.wl-faq {
  padding: 100px 0 108px;
  background: var(--page-bg);
}

@media (max-width: 767px) {
  .wl-faq {
    padding: 76px 0 84px;
  }
}

.wl-faq-layout {
  display: grid;
  gap: 32px;
}

@media (min-width: 1024px) {
  .wl-faq-layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
  }

  .wl-faq-intro {
    position: sticky;
    top: 120px;
  }
}

.wl-faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-2);
}

.wl-faq-cta svg {
  width: 15px;
  height: 15px;
  transition: transform 300ms ease;
}

.wl-faq-cta:hover svg {
  transform: translateX(3px);
}

.wl-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wl-faq-item {
  border: 1px solid #e5ebf1;
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 250ms ease;
}

.wl-faq-item[open] {
  border-color: rgba(204, 191, 147, 0.5);
}

.wl-faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}

.wl-faq-item summary::-webkit-details-marker {
  display: none;
}

.wl-faq-item__figure {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent-1);
}

.wl-faq-item__question {
  flex: 1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-2);
}

.wl-faq-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-2);
  color: var(--accent-1);
}

.wl-faq-item__icon svg {
  width: 16px;
  height: 16px;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-faq-item[open] .wl-faq-item__icon svg {
  transform: rotate(45deg);
}

.wl-faq-answer {
  margin: 0;
  padding: 0 24px 22px 58px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.65);
}

/* ============================ FINAL CTA ==================================
   Same "point of the company" navy-gradient family as the other bespoke
   solution pages. */

.wl-point {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0;
  text-align: center;
  background: linear-gradient(160deg, var(--accent-3) 0%, var(--accent-2) 55%, #0a1e33 100%);
}

.wl-point-arc {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 70px;
  pointer-events: none;
}

.wl-point-arc svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .wl-point-arc {
    height: 40px;
  }
}

.wl-point__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.wl-point__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 18px;
  background-color: #0f2d49;
  background-image: var(--img);
  background-position: center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.wl-point__photo-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 42, 78, 0.5) 0%, rgba(0, 20, 38, 0.25) 100%);
  mix-blend-mode: multiply;
}

.wl-point__photo--tl { top: 14%; left: 6%; width: 210px; height: 270px; }
.wl-point__photo--tr { top: 10%; right: 7%; width: 190px; height: 150px; }
.wl-point__photo--bl { bottom: 12%; left: 8%; width: 220px; height: 140px; }
.wl-point__photo--br { bottom: 16%; right: 5%; width: 200px; height: 250px; }

@media (max-width: 1279px) {
  .wl-point__photo--tl { width: 170px; height: 220px; left: 20px; }
  .wl-point__photo--tr { width: 150px; height: 120px; right: 24px; }
  .wl-point__photo--bl { width: 170px; height: 110px; left: 24px; }
  .wl-point__photo--br { width: 160px; height: 200px; right: 20px; }
}

@media (max-width: 1023px) {
  .wl-point {
    padding: 96px 0;
  }

  .wl-point__media {
    display: none;
  }
}

.wl-point__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.wl-point__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.wl-point__eyebrow-icon {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--accent-1);
}

.wl-point__title {
  margin: 22px auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.wl-point__lede {
  margin: 18px auto 0;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

.wl-point__alt {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.wl-point__alt a {
  color: var(--accent-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wl-point__card {
  max-width: 560px;
  margin: 34px auto 0;
  text-align: left;
}

.wl-point__form-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}

@media (min-width: 480px) {
  .wl-point__form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wl-point__field--wide {
    grid-column: span 2;
  }
}

.wl-point__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-point__field span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.wl-point__field input {
  min-height: 34px;
  padding: 0 0 6px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  transition: border-color 220ms ease;
}

.wl-point__field input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.wl-point__field input:focus {
  outline: none;
  border-color: var(--accent-1);
}

.wl-point__submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin-top: 6px;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #d9cfae 0%, var(--accent-1) 100%);
  color: var(--accent-2);
  font-size: 15px;
  font-weight: 600;
  transition: transform 300ms ease;
}

.wl-point__submit svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms ease;
}

.wl-point__submit:hover {
  transform: translateY(-2px);
}

.wl-point__submit:hover svg {
  transform: translateX(3px);
}

.wl-point__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.wl-point__assurances li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}