html {
    scroll-behavior: smooth;
}

.solutions-main,
.solutions-page {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 0;
}

.solutions-page {
    color: var(--color-text-primary);
}

.solutions-page h1,
.solutions-page h2,
.solutions-page h3,
.solutions-page strong,
.solutions-page .solutions-link {
    text-transform: uppercase;
}

.solutions-page h1,
.solutions-page h2,
.solutions-page h3 {
    margin-block-start: 0;
}

.solutions-page p:last-child { margin-block-end: 0; }

.solutions-link {
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    color: inherit;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .35em;
    transition: gap var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.solutions-link:hover { gap: var(--space-lg); color: var(--color-text-brand); }
.solutions-link--solid { padding: var(--space-sm) var(--space-lg); background: var(--color-bg-dark); color: var(--color-text-inverse); text-decoration: none; }
.solutions-link--solid:hover { background: var(--color-bg-brand); color: var(--color-text-inverse); }
.solutions-link--inverse:hover { color: var(--color-text-inverse); }
.solutions-link--cta { min-block-size: 48px; padding: var(--space-sm) var(--space-lg); background: var(--color-bg-dark); color: var(--color-text-inverse); border: 1px solid var(--color-bg-dark); text-decoration: none; cursor: pointer; }
.solutions-link--cta:hover { background: var(--color-bg-brand); color: var(--color-text-inverse); border-color: var(--color-bg-brand); }
.solutions-link--cta:focus-visible { outline: 2px solid var(--color-focus-on-light); outline-offset: 3px; }
.solutions-link--cta span { margin-inline-start: var(--space-md); color: var(--color-accent); transition: transform var(--duration-fast) var(--ease-standard); }
.solutions-link--cta:hover span, .solutions-link--cta:focus-visible span { transform: translateX(var(--space-2xs)); }
.solution-detail--systems .solutions-link--cta { background: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-bg-primary); }
.solution-detail--systems .solutions-link--cta:hover { background: var(--color-bg-surface); color: var(--color-text-primary); border-color: var(--color-bg-surface); }
.solution-detail--systems .solutions-link--cta:focus-visible, .solutions-cta .solutions-link--cta:focus-visible { outline-color: var(--color-focus-on-dark); }

.solutions-hero { background: var(--color-bg-primary); }
.solutions-hero__inner { display: grid; inline-size: calc(100% - (2 * var(--gutter-page))); max-inline-size: var(--container-main); margin-inline: auto; }
.solutions-hero__copy { display: flex; padding-block: clamp(3rem, 8vw, 5rem); flex-direction: column; align-items: flex-start; justify-content: center; }
.solutions-hero h1 { max-inline-size: 13ch; margin-block-end: var(--space-lg); font-size: clamp(2.2rem, 7.2vw, 4.1rem); line-height: .98; letter-spacing: -.035em; }
.solutions-hero__copy > p { max-inline-size: 48ch; margin-block-end: var(--space-lg); font-size: clamp(.96rem, .92rem + .18vw, 1.08rem); }
.solutions-hero__mosaic { display: grid; block-size: 26rem; margin-inline: calc(-1 * var(--gutter-page)); grid-template: repeat(2, 1fr) / 1.4fr 1fr; overflow: hidden; border-block-start: 1px solid; }
.solutions-hero__image { position: relative; min-inline-size: 0; min-block-size: 0; margin: 0; overflow: hidden; border-inline-start: 1px solid; }
.solutions-hero__image--primary { grid-row: 1 / 3; border-inline-start: 0; }
.solutions-hero__image:nth-child(3) { border-block-start: 1px solid; }
.solutions-hero__image img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.solutions-index { background: var(--color-bg-surface); border-block: 1px solid; }
.solutions-index__inner { inline-size: calc(100% - (2 * var(--gutter-page))); max-inline-size: var(--container-main); margin-inline: auto; }
.solutions-index a { display: grid; min-block-size: 6.25rem; padding-block: var(--space-md); grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--space-md); color: inherit; border-block-start: 1px solid; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), padding var(--duration-fast) var(--ease-standard); }
.solutions-index a:first-child { border-block-start: 0; }
.solutions-index a:hover { padding-inline: var(--space-sm); color: var(--color-text-brand); }
.solutions-index span { align-self: start; font-family: var(--font-display); font-size: .75rem; font-weight: 700; }
.solutions-index strong { min-inline-size: 0; max-inline-size: 22ch; overflow-wrap: break-word; font-family: var(--font-display); font-size: clamp(1rem, .92rem + .4vw, 1.35rem); line-height: 1.08; }
.solutions-index i { color: var(--color-accent); font-style: normal; }

.solution-detail { scroll-margin-top: 0; }
.solution-detail__inner { display: grid; inline-size: calc(100% - (2 * var(--gutter-page))); max-inline-size: var(--container-main); margin-inline: auto; padding-block: clamp(3rem, 7vw, 5rem); gap: var(--space-xl); }
.solution-detail__visual { min-inline-size: 0; min-block-size: 22rem; overflow: hidden; }
.solution-detail__visual img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.solution-detail__content { display: flex; min-inline-size: 0; flex-direction: column; align-items: flex-start; justify-content: center; }
.solution-detail header { display: grid; inline-size: 100%; margin-block-end: var(--space-xl); grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-sm); }
.solution-detail header > span { padding-block-start: .4rem; font-family: var(--font-display); font-size: .75rem; font-weight: 700; }
.solution-detail h2 { min-inline-size: 0; margin: 0; overflow-wrap: break-word; font-size: clamp(1.85rem, 4.3vw, 3rem); line-height: .98; letter-spacing: -.03em; }
.solution-detail__intro { max-inline-size: 62ch; margin-block-end: var(--space-xl); }
.solution-detail__intro p { margin-block-end: var(--space-md); font-size: clamp(.96rem, .92rem + .18vw, 1.06rem); }
.solution-features { display: grid; inline-size: 100%; margin-block-end: var(--space-lg); }
.solution-features article { padding-block: var(--space-md); border-block-start: 1px solid currentColor; }
.solution-features h3 { margin-block-end: var(--space-xs); font-size: clamp(1rem, .95rem + .28vw, 1.25rem); }
.solution-features p { max-inline-size: 52ch; font-size: .92rem; }
.solution-detail__note { max-inline-size: 62ch; margin-block: 0 var(--space-lg); padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--color-accent); font-size: .88rem; }

.solution-detail--systems { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.solution-detail--systems .solution-detail__visual { border: 1px solid #ffffff66; }
.solution-detail--sites { background: var(--color-bg-surface); }
.solution-detail--infoproducts { background: var(--color-bg-primary); }

.solutions-process { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.solutions-process__inner { inline-size: calc(100% - (2 * var(--gutter-page))); max-inline-size: var(--container-main); margin-inline: auto; padding-block: clamp(3rem, 6vw, 4.5rem); }
.solutions-process header { display: grid; margin-block-end: var(--space-xl); gap: var(--space-lg); }
.solutions-process h2 { margin: 0; font-size: clamp(2rem, 5.8vw, 3.4rem); line-height: .98; letter-spacing: -.03em; }
.solutions-process header p { max-inline-size: 46ch; align-self: end; }
.solutions-process__steps { display: grid; }
.solutions-process__steps article { padding-block: var(--space-md); border-block-start: 1px solid #ffffff66; }
.solutions-process__steps span { display: block; margin-block-end: var(--space-md); color: var(--color-accent); font-family: var(--font-display); font-size: .75rem; font-weight: 700; }
.solutions-process__steps h3 { margin-block-end: var(--space-sm); font-size: clamp(1.05rem, .98rem + .3vw, 1.3rem); }
.solutions-process__steps p { max-inline-size: 36ch; font-size: .92rem; }

.solutions-cta { position: relative; overflow: hidden; background: var(--color-bg-brand); color: var(--color-text-inverse); }
.solutions-cta > img { position: absolute; inset: 50% -3rem auto auto; inline-size: min(65vw, 25rem); filter: brightness(0) invert(1); opacity: .13; transform: translateY(-50%) rotate(-8deg); }
.solutions-cta__inner { position: relative; display: grid; inline-size: calc(100% - (2 * var(--gutter-page))); max-inline-size: var(--container-main); min-block-size: 25rem; margin-inline: auto; padding-block: clamp(3rem, 6vw, 4.5rem); align-items: center; gap: var(--space-xl); }
.solutions-cta h2 { margin: 0; font-size: clamp(2.1rem, 6.8vw, 3.8rem); line-height: .97; letter-spacing: -.03em; }
.solutions-cta__inner > div { position: relative; max-inline-size: 36rem; }
.solutions-cta p { margin-block-end: var(--space-lg); font-size: clamp(1rem, .94rem + .25vw, 1.16rem); }

@media (min-width: 48rem) {
    .solutions-index__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .solutions-index a { padding-inline: var(--space-lg); border-block-start: 0; border-inline-start: 1px solid; }
    .solutions-index a:first-child { border-inline-start: 0; }
    .solution-detail__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .solution-detail__visual { min-block-size: 36rem; }
    .solution-detail--sites .solution-detail__content { order: 0; }
    .solution-detail--sites .solution-detail__visual { order: 1; }
    .solution-features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
    .solutions-process header { grid-template-columns: 1fr 1fr; }
    .solutions-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
    .solutions-cta__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
    .solutions-hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); block-size: clamp(35rem, 72svh, 39.5rem); }
    .solutions-hero__copy { padding-inline: clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem); }
    .solutions-hero h1 { max-inline-size: 18ch; font-size: clamp(3rem, 4vw, 3.75rem); }
    .solutions-hero__mosaic { block-size: auto; margin: 0; border-block-start: 0; border-inline-start: 1px solid; }
    .solutions-index a { min-block-size: 6.75rem; }
    .solution-detail__inner { min-block-size: 40rem; padding-block: 3rem; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: clamp(2.5rem, 5vw, 5rem); }
    .solution-detail--sites .solution-detail__inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .solution-detail__visual { min-block-size: 0; max-block-size: 34rem; }
    .solution-features article { padding-block: var(--space-sm); }
    .solutions-process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-xl); }
    .solutions-process__steps article { min-block-size: 12.5rem; }
}

@media (max-width: 47.999rem) {
    .solutions-hero__inner,
    .solutions-index__inner,
    .solution-detail__inner,
    .solutions-process__inner,
    .solutions-cta__inner { inline-size: calc(100% - (2 * var(--space-md))); }
    .solutions-hero__mosaic { margin-inline: calc(-1 * var(--space-md)); }
    .solutions-link { inline-size: 100%; }
    .solution-detail--sites .solution-detail__visual { grid-row: 1; }
    .solution-detail--sites .solution-detail__content { grid-row: 2; }
    .solution-detail__visual { margin-inline: calc(-1 * var(--space-md)); }
    .solution-detail__inner { padding-block-start: 0; }
    .solution-detail__content { padding-block-start: var(--space-md); }
    .solutions-process__steps article:last-child { padding-block-end: 0; }
}

@media (max-width: 22rem) {
    .solutions-hero h1 { font-size: 2.2rem; }
    .solutions-hero__mosaic { block-size: 22rem; }
    .solutions-index a { grid-template-columns: 2rem 1fr auto; }
    .solution-detail h2 { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .solutions-link,
    .solutions-link--cta span,
    .solutions-index a { transition: none; }
    .solutions-link--cta:hover span,
    .solutions-link--cta:focus-visible span { transform: none; }
}