/* ==========================================================================
   Solutions
   ========================================================================== */
.phero--solutions { height: 481px; }
.phero--solutions .phero-inner { padding: 44px 0 0 11px; }
.phero--solutions .eyebrow { font-size: 13.5px; letter-spacing: .26em; color: #a0835e; }
.phero--solutions h1 { margin-top: 14px; font-size: 62px; line-height: 59px; }
.phero--solutions .lead { margin-top: 18px; max-width: 520px; font-size: 18px; line-height: 28px; }
.phero--solutions .hero-cta { margin-top: 20px; gap: 24px; }
.phero--solutions .hero-cta .btn { height: 57px; font-size: 16.5px; }
.phero--solutions .hero-cta .btn-gold { width: 200px; }
.phero--solutions .hero-cta .btn-outline { width: 218px; }
.phero--solutions .hero-note { margin-top: 20px; }

.sol-list { padding: 30px 0 18px; background: var(--cream-2); }
.sol-list .sec-head { padding-left: 11px; }
.sol-list .sec-head h2 { margin-top: 12px; font-size: 44px; line-height: 50px; }
.sol-list .sec-head p { margin-top: 2px; font-size: 18px; }
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: min(1343px, calc(100vw - 64px)); margin: 30px 0 0 calc((min(1343px, 100vw - 64px) - 100%) / -2); }
.sol-card { display: flex; gap: 14px; height: 250px; padding: 14px; background: #fff; border: 1px solid #efe9e1; border-radius: 8px; transition: box-shadow .2s; }
.sol-card:hover { box-shadow: 0 10px 26px rgba(60, 40, 20, .07); }
.sol-copy { position: relative; flex: 1; padding: 4px 0 0 4px; display: flex; flex-direction: column; }
.sol-copy .feature-icon { width: 52px; height: 52px; }
.sol-copy .feature-icon svg { width: 28px; height: 28px; }
.sol-arrow { position: absolute; right: 8px; top: 18px; width: 20px; height: 20px; color: #222; }
.sol-copy h3 { margin-top: 16px; font-family: var(--serif); font-weight: 560; font-size: 22.5px; line-height: 24px; letter-spacing: -.012em; }
.sol-copy p { margin-top: 8px; font-size: 14.5px; line-height: 21.5px; color: var(--muted); }
.sol-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--gold-text); }
.sol-more svg { width: 15px; height: 15px; }
.sol-vis { width: 211px; flex: none; border-radius: 6px; overflow: hidden; background: #f6f1eb; position: relative; }

.sv { position: absolute; inset: 0; font-size: 11px; color: #2a2826; }
.sv img { width: 100%; height: 100%; object-fit: cover; }
.sv b { display: block; font-size: 11.5px; font-weight: 600; color: #1f1e1c; }
.sv ul { list-style: none; margin: 0; padding: 0; }
.sv-attr .sv-panel { position: absolute; right: 8px; bottom: 10px; width: 132px; padding: 10px 10px 8px; background: #fff; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .1); }
.sv-attr li { position: relative; padding-left: 16px; margin-top: 5px; font-size: 10px; color: #3e3b37; }
.sv-attr li::before { content: "✓"; position: absolute; left: 0; color: #3f8358; font-weight: 700; }
.sv-list { padding: 12px 10px; background: linear-gradient(#f2ece5, #efe8e0); }
.sv-list > b { padding: 8px 10px; background: #fff; border-radius: 5px 5px 0 0; }
.sv-list ul { background: #fff; border-radius: 0 0 5px 5px; padding: 0 10px 6px; }
.sv-list li, .sv-opp li { display: flex; justify-content: space-between; align-items: center; height: 38px; border-top: 1px solid #f1ede8; font-size: 11px; }
.sv-list li span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 1.5px solid #9a958e; border-radius: 50%; vertical-align: -1px; }
.sv em { font-style: normal; color: #55524d; }
.sv-ai { display: grid; place-items: center; background: linear-gradient(#f2ece5, #efe8e0); }
.sv-ai ul { width: 150px; }
.sv-ai li { display: flex; align-items: center; gap: 10px; height: 40px; margin: 6px 0; padding: 0 12px; background: #fff; border-radius: 6px; font-size: 13px; font-weight: 500; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); }
.sv-ai .ai { margin: 0; }
.sv-opp { padding: 10px; background: #fff; border: 1px solid #f0ebe5; }
.sv-opp img { height: 102px; border-radius: 5px; }
.sv-badge { position: absolute; left: 50px; top: 16px; padding: 3px 8px; background: #e5f3ea; color: #2f7a4e; font-size: 10px; border-radius: 4px; }
.sv-opp ul { margin-top: 6px; }
.sv-opp li { height: 27px; font-size: 10px; }
.sv-content { padding: 10px; background: #fff; border: 1px solid #f0ebe5; }
.sv-content > b { padding-bottom: 8px; border-bottom: 1px solid #f1ede8; }
.sv-row { display: flex; gap: 8px; margin-top: 8px; height: calc(100% - 34px); }
.sv-row img { width: 72px; height: 100%; border-radius: 4px; }
.sv-row ul { flex: 1; }
.sv-row li, .sv-studio li { display: flex; align-items: center; height: 26px; padding-left: 16px; position: relative; font-size: 9.5px; color: #3e3b37; border-bottom: 1px solid #f3efea; }
.sv-row li::before, .sv-studio li::before { content: ""; position: absolute; left: 2px; width: 8px; height: 8px; border: 1.3px solid #b8b3ab; border-radius: 50%; }
.sv-studio { display: flex; gap: 8px; padding: 12px 10px; background: #fff; border: 1px solid #f0ebe5; }
.sv-studio img { width: 58px; height: 100%; border-radius: 4px; }
.sv-studio ul { flex: 1; padding: 2px 6px; border: 1px solid #f1ede8; border-radius: 5px; }
.sv-studio li { height: 32px; }

.sol-why { position: relative; height: 295px; overflow: hidden; color: #fff; background: radial-gradient(500px 300px at 20% 50%, rgba(80, 60, 40, .35), transparent 70%), linear-gradient(90deg, #12100d, #151310 50%, #0f0e0c); }
.sol-why-l { position: absolute; left: 0; top: 0; height: 100%; width: 100px; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent); mask-image: linear-gradient(90deg, #000 50%, transparent); }
.sol-why-inner { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 640px; align-items: center; padding-left: 36px; }
.sol-why-copy .eyebrow { font-size: 12.5px; }
.sol-why-copy h2 { margin-top: 12px; font-family: var(--serif); font-weight: 540; font-size: 48px; line-height: 52px; letter-spacing: -.018em; }
.sol-why-copy p { margin-top: 18px; max-width: 420px; font-size: 18px; line-height: 28px; color: #ebe8e3; }
.sol-why-copy .btn { margin: -2px 0 0 228px; width: 232px; height: 53px; font-size: 16.5px; }
.sol-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px; }
.sol-why-grid li { display: flex; gap: 22px; }
.why-ico { width: 67px; height: 67px; border-radius: 50%; border: 1px solid rgba(211, 182, 135, .25); background: rgba(255, 255, 255, .03); display: grid; place-items: center; color: #d3b687; flex: none; }
.why-ico svg { width: 30px; height: 30px; }
.sol-why-grid h3 { font-family: var(--serif); font-weight: 540; font-size: 20px; line-height: 26px; color: #fff; }
.sol-why-grid p { margin-top: 6px; font-size: 15px; line-height: 22.5px; color: #d9d5cf; }

.sol-stack { padding: 22px 0 22px; text-align: center; background: var(--cream-2); }
.sol-stack .eyebrow { font-size: 12.5px; color: #a0835e; }
.sol-stack h2 { margin-top: 10px; font-family: var(--serif); font-weight: 560; font-size: 36px; line-height: 40px; letter-spacing: -.015em; }
.sol-stack .sub { margin-top: 6px; font-size: 16px; color: var(--muted); }
.sol-stack ul { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; margin-top: 26px; }
.sol-stack li { display: flex; justify-content: center; align-items: center; height: 56px; }
.sol-stack li + li { border-left: 1px solid var(--line); }
.sol-stack li img { height: 46px; width: auto; }
.sol-stack .csv { gap: 14px; text-align: left; }
.csv-ico { width: 34px; height: 44px; border-radius: 4px; background: #1f9d55; color: #fff; display: grid; place-items: center; }
.csv-ico svg { width: 22px; height: 22px; }
.sol-stack .csv b { display: block; font-size: 19px; line-height: 20px; }
.sol-stack .csv small { font-size: 16px; color: #3a3834; }

@media (max-width: 1200px) {
  .phero--solutions { height: auto; padding-bottom: 40px; }
  .sol-grid { grid-template-columns: 1fr 1fr; width: auto; margin-left: 0; }
  .sol-why { height: auto; padding: 48px 0; }
  .sol-why-inner { grid-template-columns: 1fr; gap: 36px; padding-left: 0; }
  .sol-why-copy .btn { margin: 20px 0 0; }
  .sol-stack ul { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
}
@media (max-width: 760px) {
  .phero--solutions h1 { font-size: 42px; line-height: 44px; }
  .sol-list .sec-head h2 { font-size: 34px; line-height: 40px; }
  .sol-grid { grid-template-columns: 1fr; }
  .sol-card { height: auto; flex-direction: column; }
  .sol-vis { width: 100%; height: 200px; }
  .sol-why-grid { grid-template-columns: 1fr; }
  .sol-stack ul { grid-template-columns: repeat(2, 1fr); }
  .sol-stack li + li { border: 0; }
}