:root {
  --solution-ink: #17120f;
  --solution-paper: #f3eadc;
  --solution-cream: #fff9f0;
  --solution-ember: #ff6232;
  --solution-line: rgba(23, 18, 15, .18);
}

.solution-store,
.solution-detail { background: var(--solution-paper); color: var(--solution-ink); overflow: clip; }
.solution-store .container,
.solution-detail .container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.solution-store__hero { min-height: 600px; padding: 150px 0 88px; border-bottom: 1px solid var(--solution-line); background: radial-gradient(circle at 86% 8%, rgba(255, 98, 50, .14), transparent 28%), var(--solution-paper); }
.solution-store__hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 72px; }
.solution-store__eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.2 "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.solution-store__eyebrow > span { width: 8px; height: 8px; border-radius: 50%; background: var(--solution-ember); box-shadow: 0 0 0 5px rgba(255, 98, 50, .14); }
.solution-store__intro h1 { max-width: 880px; margin: 28px 0 24px; font: 600 clamp(54px, 7.2vw, 104px)/.88 "Fraunces", serif; letter-spacing: -.055em; }
.solution-store__intro h1 em { color: var(--solution-ember); font-weight: 500; }
.solution-store__intro p { max-width: 620px; margin: 0; font-size: clamp(18px, 2vw, 23px); line-height: 1.4; }
.solution-store__jump { display: inline-flex; align-items: center; gap: 18px; margin-top: 36px; color: inherit; font-weight: 700; text-decoration: none; }
.solution-store__jump span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; }
.solution-store__status { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; padding: 24px 0 4px; border-top: 1px solid var(--solution-ink); }
.solution-store__status strong { grid-row: 1 / 3; font: 500 58px/.8 "Fraunces", serif; color: var(--solution-ember); }
.solution-store__status span { font-weight: 700; line-height: 1.1; }
.solution-store__status small { grid-column: 2; color: rgba(23, 18, 15, .58); }

.solution-store__catalog { padding: 100px 0 112px; background: var(--solution-cream); }
.solution-store__section-head { display: grid; grid-template-columns: 180px minmax(0, 650px); gap: 40px; margin-bottom: 64px; }
.solution-store__section-head > span { padding-top: 9px; font: 500 11px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.solution-store__section-head h2,
.solution-store__next h2 { margin: 0; font: 550 clamp(36px, 4.6vw, 64px)/1 "Fraunces", serif; letter-spacing: -.035em; }
.solution-products { border-top: 1px solid var(--solution-ink); }
.solution-product { border-bottom: 1px solid var(--solution-line); }
.solution-product__toggle { width: 100%; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 28px 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.solution-product__number { font: 500 12px "Spline Sans Mono", monospace; color: var(--solution-ember); }
.solution-product__heading { display: grid; gap: 4px; min-width: 0; }
.solution-product__heading small { font: 500 11px "Spline Sans Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(23, 18, 15, .55); }
.solution-product__heading strong { font: 600 clamp(31px, 4vw, 55px)/1 "Fraunces", serif; letter-spacing: -.035em; }
.solution-product__action { display: flex; align-items: center; gap: 16px; font-weight: 700; }
.solution-product__action i { position: relative; width: 46px; height: 46px; border: 1px solid var(--solution-ink); border-radius: 50%; }
.solution-product__action i::before,
.solution-product__action i::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 14px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s ease; }
.solution-product__action i::after { transform: translate(-50%, -50%) rotate(90deg); }
.solution-product__toggle[aria-expanded="true"] .solution-product__action i { background: var(--solution-ink); color: white; }
.solution-product__toggle[aria-expanded="true"] .solution-product__action i::after { transform: translate(-50%, -50%) rotate(0deg); }
.solution-product__panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 44px; padding: 10px 0 48px 108px; }
.solution-product__panel[hidden] { display: none; }
.solution-product__media { min-width: 0; border-radius: 18px; overflow: hidden; background: #d8d0c5; box-shadow: 0 18px 50px rgba(32, 23, 18, .12); }
.solution-product__media a { display: block; }
.solution-product__media img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; transition: transform .5s ease; }
.solution-product__media:hover img { transform: scale(1.015); }
.solution-product__summary { min-width: 0; align-self: center; }
.solution-product__summary > p { margin: 24px 0 30px; font-size: 18px; line-height: 1.55; color: rgba(23, 18, 15, .76); }
.solution-product__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.solution-product__chips span { padding: 8px 11px; border: 1px solid var(--solution-line); border-radius: 999px; font: 600 10px "Spline Sans Mono", monospace; letter-spacing: .03em; text-transform: uppercase; }
.solution-product__buttons,
.solution-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.solution-button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 700; color: inherit; text-decoration: none; transition: transform .2s ease, background .2s ease, color .2s ease; }
.solution-button:hover { transform: translateY(-2px); }
.solution-button--primary { background: var(--solution-ember); color: #180e0a; }
.solution-button--ghost,
.solution-button--ghost-dark { border: 1px solid var(--solution-ink); }
.solution-button--text { min-height: auto; padding: 10px 0; border-radius: 0; }
.solution-button--light { background: var(--solution-cream); color: var(--solution-ink); }

.solution-store__next { padding: 100px 0; background: var(--solution-paper); }
.solution-store__next-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 90px; }
.solution-store__next h2 { margin-top: 24px; }
.solution-store__future { border-top: 1px solid var(--solution-ink); }
.solution-store__future > div { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--solution-line); }
.solution-store__future span,
.solution-store__future small { font: 500 10px "Spline Sans Mono", monospace; text-transform: uppercase; }
.solution-store__future strong { font: 600 30px "Fraunces", serif; }
.solution-store__future small { color: rgba(23, 18, 15, .5); }
.solution-store__cta,
.solution-detail__closing { padding: 76px 0; background: var(--solution-ink); color: var(--solution-cream); }
.solution-store__cta-inner,
.solution-detail__closing-inner { display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.solution-store__cta span,
.solution-detail__closing span { font: 500 11px "Spline Sans Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.solution-store__cta h2,
.solution-detail__closing h2 { max-width: 760px; margin: 14px 0 0; font: 500 clamp(35px, 4.8vw, 62px)/1 "Fraunces", serif; letter-spacing: -.035em; }

.solution-detail__hero { min-height: 720px; padding: 120px 0 94px; background: var(--solution-paper); }
.solution-detail__back { display: inline-flex; gap: 10px; margin-bottom: 54px; color: inherit; font-weight: 700; text-decoration: none; }
.solution-detail__hero-grid { display: grid; grid-template-columns: minmax(390px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 60px; }
.solution-detail__copy { min-width: 0; }
.solution-detail__copy h1 { margin: 26px 0 24px; font: 600 clamp(58px, 6vw, 84px)/.9 "Fraunces", serif; letter-spacing: -.05em; overflow-wrap: normal; }
.solution-detail__lead { max-width: 540px; font-size: 20px; line-height: 1.5; color: rgba(23, 18, 15, .73); }
.solution-detail__lead p { margin: 0; }
.solution-detail__copy .solution-product__chips { margin-top: 28px; }
.solution-detail__actions { margin-top: 36px; }
.solution-detail__visual { min-width: 0; padding: 12px; border-radius: 22px; background: #191512; box-shadow: 0 28px 70px rgba(48, 32, 22, .2); transform: rotate(1deg); }
.solution-detail__visual-label { display: block; padding: 4px 6px 12px; color: rgba(255,255,255,.58); font: 500 9px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.solution-detail__visual img { width: 100%; height: auto; display: block; border-radius: 12px; }
.solution-detail__body { padding: 100px 0 120px; background: var(--solution-cream); }
.solution-detail__body-grid { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: 100px; }
.solution-detail__body aside { display: grid; align-content: start; gap: 12px; }
.solution-detail__body aside span { font: 500 10px "Spline Sans Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--solution-ember); }
.solution-detail__body aside strong { font: 600 25px/1.1 "Fraunces", serif; }
.solution-detail__content { min-width: 0; font-size: 18px; line-height: 1.65; }
.solution-detail__content > *:first-child { margin-top: 0; }
.solution-detail__closing p { max-width: 620px; margin: 18px 0 0; color: rgba(255,255,255,.65); font-size: 17px; }

@media (max-width: 900px) {
  .solution-store__hero-grid,
  .solution-store__next-grid,
  .solution-detail__hero-grid { grid-template-columns: 1fr; }
  .solution-store__status { max-width: 320px; }
  .solution-product__panel { grid-template-columns: 1fr; padding-left: 80px; }
  .solution-product__summary { max-width: 680px; }
  .solution-detail__visual { transform: none; }
  .solution-detail__body-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 50px; }
}

@media (max-width: 760px) {
  .solution-store .container,
  .solution-detail .container { width: min(100% - 28px, 1180px); }
  .solution-store__hero { min-height: auto; padding: 112px 0 64px; }
  .solution-store__hero-grid { gap: 56px; }
  .solution-store__intro,
  .solution-product__heading,
  .solution-product__summary,
  .solution-detail__copy,
  .solution-detail__visual { min-width: 0; }
  .solution-store__intro h1 { font-size: clamp(49px, 15vw, 72px); }
  .solution-store__catalog,
  .solution-store__next,
  .solution-detail__body { padding: 68px 0 76px; }
  .solution-store__section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  .solution-store__section-head h2 { font-size: 39px; }
  .solution-product__toggle { grid-template-columns: 34px minmax(0, 1fr) 42px; gap: 10px; padding: 22px 0; }
  .solution-product__heading strong { font-size: 34px; overflow-wrap: anywhere; }
  .solution-product__action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .solution-product__action i { width: 40px; height: 40px; }
  .solution-product__panel { gap: 28px; padding: 4px 0 38px; }
  .solution-product__summary > p { margin: 20px 0 24px; font-size: 17px; }
  .solution-product__buttons,
  .solution-detail__actions { align-items: stretch; flex-direction: column; }
  .solution-button { width: 100%; }
  .solution-button--text { width: auto; align-self: flex-start; }
  .solution-store__next-grid { gap: 42px; }
  .solution-store__future > div { grid-template-columns: 34px minmax(0, 1fr); }
  .solution-store__future small { grid-column: 2; }
  .solution-store__cta-inner,
  .solution-detail__closing-inner { align-items: stretch; flex-direction: column; }
  .solution-detail__hero { min-height: auto; padding: 105px 0 72px; }
  .solution-detail__back { margin-bottom: 40px; }
  .solution-detail__hero-grid { gap: 48px; }
  .solution-detail__copy h1 { font-size: clamp(48px, 14vw, 58px); }
  .solution-detail__body-grid { grid-template-columns: 1fr; gap: 34px; }
  .solution-store__cta,
  .solution-detail__closing { padding: 62px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-button,
  .solution-product__media img,
  .solution-product__action i::after { transition: none; }
}