/* ============================================================
   sections.css — per-section styling

   Section order follows the content brief:
     1 Hero · 2 Trust strip · 3 GCC situations · 4 Capabilities
     5 Rent|Lease|Buy · 6 Stakeholder outcomes · 7 How we engage
     8 Readiness assessment · 9 Why Sanctum · 10 Enterprise proof
     11 FAQ · 12 Final CTA
   ============================================================ */

/* ---- 1. Hero ------------------------------------------------------
   Single hero. The three-slide carousel was removed with the brief —
   which also drops the Swiper CDN dependency entirely. */
.hero { position: relative; background: var(--blue-900); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg svg { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,13,18,0.95) 0%, rgba(10,13,18,0.76) 46%, rgba(10,13,18,0.36) 100%),
    linear-gradient(0deg, rgba(10,13,18,0.78), rgba(10,13,18,0) 58%);
}
.hero__inner { position: relative; z-index: 2; }
.hero {
  display: flex; align-items: center;
  min-height: clamp(560px, 82vh, 780px);
  padding-block: var(--sp-9);
}
.hero__content { max-width: 62ch; }
.hero__content h1 { margin-bottom: var(--sp-5); max-width: 20ch; }
.hero__lede { color: var(--gray-300); font-size: var(--fs-lg); line-height: var(--lh-mid); max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
.hero__support { margin-top: var(--sp-4); color: var(--gray-400); font-size: var(--fs-sm); }

/* ---- 2. Trust strip ------------------------------------------------ */
.trust-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4);
}
.trust-strip__item {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--blue-400);
}
.trust-strip__value { font-weight: 700; font-size: var(--fs-base); color: var(--gray-900); line-height: 1.3; }
.trust-strip__label { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-mid); }
@media (max-width: 1000px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .trust-strip { grid-template-columns: 1fr; } }

/* ---- 5. Rent | Lease | Buy ----------------------------------------- */
.hybrid {
  margin-top: var(--sp-6); background: var(--blue-50);
  border: 1px solid var(--blue-100); border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.hybrid h3 { color: var(--blue-600); margin-bottom: var(--sp-3); }
.hybrid p { color: var(--text-muted); line-height: var(--lh-mid); }
.hybrid__map {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin-block: var(--sp-5);
}
/* Stacked, not inline: "Permanent workforce -> Purchase" on one line wrapped
   mid-pair and split the mapping across two rows. */
.hybrid__map li {
  display: flex; flex-direction: column; gap: 0.3rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); font-size: var(--fs-sm);
}
.hybrid__from { color: var(--text-muted); line-height: var(--lh-mid); }
.hybrid__arrow { display: none; }
.hybrid__to {
  color: var(--blue-600); font-weight: 700; font-size: var(--fs-base);
  display: flex; align-items: center; gap: 0.4rem;
}
.hybrid__to::before { content: "\2192"; color: var(--blue-400); }
@media (max-width: 900px) { .hybrid__map { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hybrid__map { grid-template-columns: 1fr; } }

/* Required compliance wording — replaces the former CapEx-to-OpEx headline.
   Keep the disclaimer immediately adjacent to the claim. */
.compliance-note {
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--blue-600); background: var(--gray-50);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.compliance-note__lead { font-weight: 700; color: var(--gray-900); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.compliance-note p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-mid); }

/* ---- 6. Stakeholder outcomes --------------------------------------- */
.stakeholders { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.stakeholder {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.stakeholder:hover { background: rgba(255,255,255,0.09); border-color: var(--blue-400); transform: translateY(-4px); }
.stakeholder h3 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.stakeholder p { color: var(--gray-300); font-size: var(--fs-sm); line-height: var(--lh-mid); }
@media (max-width: 1080px) { .stakeholders { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .stakeholders { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .stakeholders { grid-template-columns: 1fr; } }

/* ---- 8. Readiness assessment --------------------------------------- */
.readiness { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-7); align-items: start; }
.readiness__intro h2 { margin-bottom: var(--sp-4); }
.readiness__intro > p { color: var(--text-muted); font-size: var(--fs-lg); line-height: var(--lh-mid); }
.readiness__outcomes {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-md); position: sticky; top: calc(var(--header-h) + 1rem);
}
.readiness__outcomes h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.readiness__outcomes .btn { margin-top: var(--sp-6); white-space: normal; }
@media (max-width: 900px) {
  .readiness { grid-template-columns: 1fr; gap: var(--sp-6); }
  .readiness__outcomes { position: static; }
}

/* ---- 10. Enterprise proof ------------------------------------------ */
.proof-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.proof {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5); text-align: center; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.proof:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.proof__value {
  font-size: var(--fs-num); font-weight: 800; color: var(--blue-600);
  letter-spacing: var(--tr-display); line-height: 1.1;
}
.proof__label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-3); line-height: var(--lh-mid); }
.proof-statement {
  text-align: center; margin: var(--sp-7) auto 0; max-width: 40ch;
  font-size: var(--fs-xl); font-weight: 700; color: var(--gray-900);
  letter-spacing: var(--tr-tight);
}
@media (max-width: 1000px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .proof-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- 12. Final CTA -------------------------------------------------- */
.final-cta { text-align: center; }
.final-cta h2 { margin-bottom: var(--sp-5); }
.final-cta .lead { margin-inline: auto; color: var(--gray-300); }
.final-cta .pipe-line { text-align: center; }
.final-cta__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center; margin-top: var(--sp-7);
}
.final-cta__contact {
  display: flex; justify-content: center; gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-sm); color: var(--gray-400);
}
.final-cta__contact a { color: #fff; font-weight: 600; }
.final-cta__contact a:hover { color: var(--blue-400); }

/* ---- Hero image, rendered as a brand duotone -----------------------------
   The supplied photograph is deep royal blue, which fights the near-black /
   gold theme. Rather than recolouring the file (and having to redo it every
   time the image changes) the tint is done in CSS:

     1. grayscale the photo
     2. ::before floods the SHADOWS with ink        (mix-blend-mode: lighten)
     3. ::after  floods the HIGHLIGHTS with gold    (mix-blend-mode: multiply)

   That maps the whole image onto an ink -> gold ramp, so any photo dropped in
   later inherits the palette automatically. Adjust contrast/brightness on
   .hero__media to taste. */
.hero__media {
  position: absolute; inset: 0;
  background-image: url("../img/hero-gcc.jpg");
  background-size: cover;
  background-position: 72% center;   /* keep the building/people in frame */
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  isolation: isolate;
}
.hero__media::before,
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero__media::before { background: #0a0d12; mix-blend-mode: lighten; }
.hero__media::after  { background: #f1c84c; mix-blend-mode: multiply; opacity: 0.92; }

@media (max-width: 900px) {
  /* Portrait viewports crop the photo to noise — hold the subject side. */
  .hero__media { background-position: 78% center; }
}