/* ============================================================
   Our Solutions — line-free editorial layout.
   Separation comes from whitespace, color fields, and imagery,
   never from rules or dotted leaders. Built on BGH brand tokens.
   ============================================================ */

.sol2 {
  --ink: var(--about-maroon, #5c1a35);
  --hot: var(--about-orange, #e85a1a);
  --paper: var(--about-cream, #f7f0e4);
  --paper-2: #efe4d2;            /* tinted color field */
  --body: var(--about-muted, #6f5f57);
  --display: var(--about-display, "BGH Glancyr", Georgia, serif);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--paper);
  overflow-x: clip;
}

.sol-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hot);
}
.sol-eyebrow.light { color: #f3a978; }

/* ============================================================
   HERO  — airy, no strips, no rules
   ============================================================ */
.sol-hero {
  padding: clamp(150px, 20vh, 230px) 0 clamp(70px, 9vw, 120px);
}
.sol-hero-inner { width: min(1180px, 90vw); margin-inline: auto; }
.sol-hero-title {
  margin: 18px 0 0;
  max-width: 20ch;
  font-family: var(--display) !important;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(42px, 4.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.sol-hero-title em { font-style: normal; color: var(--hot); }
.sol-hero-lede {
  margin: 30px 0 0;
  max-width: 56ch;
  color: var(--body);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
}
.sol-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: clamp(40px, 5vw, 64px);
}
.sol-jump a {
  position: relative;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 26px);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.sol-jump a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.sol-jump a:hover { color: var(--hot); }
.sol-jump a:hover::after { transform: scaleX(1); }

/* ============================================================
   CAPABILITY SECTIONS — alternating, color-field separated
   ============================================================ */
.sol-cap { padding: clamp(72px, 10vw, 150px) 0; }
.sol-cap.tint { background: var(--paper-2); }
.sol-cap-inner {
  width: min(1180px, 90vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.sol-cap.alt .sol-cap-media { order: 2; }

.sol-cap-media {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(60, 15, 30, 0.55);
}
.sol-cap-media img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;          /* extra height gives the parallax room to drift */
  object-fit: cover;
  display: block;
  will-change: transform;
}

.sol-cap-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.sol-cap-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  color: var(--hot);
}
.sol-cap-num.light { color: #fff; }
.sol-cap-text h2 {
  margin: 0;
  font-family: var(--display) !important;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.sol-cap-text h2 em { font-style: normal; color: var(--hot); }
.sol-body {
  margin: 20px 0 0;
  max-width: 54ch;
  color: var(--body);
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.62;
}
.sol-caplabel {
  margin: 30px 0 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}

/* soft borderless pills — no rules anywhere */
.sol-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.sol-pills li {
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(92, 26, 53, 0.06);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.sol-pills li.hot {
  background: rgba(232, 90, 26, 0.1);
  color: #b8401a;
}
.sol-pills.light li {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ============================================================
   WHY — maroon color field, numbers + space, no rules
   ============================================================ */
.sol-why {
  position: relative;
  background:
    radial-gradient(circle at 88% 8%, rgba(232, 90, 26, 0.22), transparent 46%),
    var(--ink);
  color: #fff;
  overflow: clip;
}
.sol-why-inner {
  width: min(1180px, 90vw);
  margin-inline: auto;
  padding: clamp(72px, 9vw, 134px) 0;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.sol-why-lead h2 {
  margin: 16px 0 0;
  font-family: var(--display) !important;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.sol-why-lead h2 em { font-style: normal; color: var(--hot); }
.sol-why-lead p {
  margin: 22px 0 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.64;
}
.sol-why-grid {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3vw, 40px) clamp(28px, 4vw, 56px);
}
.sol-why-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.3;
}
.sol-why-grid .n {
  font-family: var(--display);
  font-size: 16px;
  color: var(--hot);
}

/* ============================================================
   CLOSE
   ============================================================ */
.sol-close {
  padding: clamp(86px, 12vw, 168px) 0;
}
.sol-close-inner { width: min(1180px, 90vw); margin-inline: auto; }
.sol-close-link {
  display: block;
  margin: 18px 0 0;
  max-width: 17ch;
  font-family: var(--display) !important;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(34px, 4.4vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.sol-close-link em { font-style: normal; color: var(--hot); }
.sol-close-link .arr {
  display: inline-block;
  color: var(--hot);
  transition: transform 0.35s var(--ease);
}
.sol-close-link:hover .arr { transform: translateX(16px); }
.sol-close-sub {
  margin: 30px 0 0;
  max-width: 50ch;
  color: var(--body);
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .sol-cap-inner { grid-template-columns: 1fr; gap: 30px; }
  .sol-cap.alt .sol-cap-media { order: 0; }
  .sol-cap-media { aspect-ratio: 3 / 2; }
  .sol-why-inner { grid-template-columns: 1fr; gap: 32px; }
  .sol-why-grid { grid-template-columns: 1fr; gap: 18px 0; }
}