.solutions-page { color: var(--white); background: var(--ink); }
.solutions-main { min-height: 100vh; padding-top: var(--header-h); }

.solutions-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr); gap: clamp(40px, 8vw, 130px); align-items: end; padding-top: clamp(74px, 10vw, 150px); padding-bottom: clamp(54px, 7vw, 96px); }
.solutions-back { display: inline-flex; min-height: 44px; align-items: center; gap: 13px; margin-bottom: clamp(34px, 5vw, 68px); color: rgba(255,255,255,.66); font-size: .63rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transition: color 180ms ease, transform 180ms var(--ease-out); }
.solutions-back span { color: var(--cyan); font-size: 1rem; }
.solutions-intro h1 { max-width: 9ch; margin: 0; font-family: var(--display); font-size: clamp(5.2rem, 10vw, 10rem); font-weight: 400; line-height: .8; letter-spacing: -.025em; text-transform: uppercase; }
.solutions-intro > p { max-width: 51ch; margin: 0 0 8px; color: rgba(255,255,255,.68); font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height: 1.78; }

.solutions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.solution-card { position: relative; min-width: 0; aspect-ratio: 16 / 10; scroll-margin-top: calc(var(--header-h) + 18px); overflow: hidden; padding: 0; color: var(--white); background: var(--ink-2); border: 0; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); text-align: left; cursor: pointer; isolation: isolate; }
.solution-card:nth-child(even) { border-right: 0; }
.solution-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) brightness(.72); transform: scale(1.012); transition: transform 800ms var(--ease-out), filter 380ms ease; }
.solution-card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(2,10,18,.05) 28%, rgba(2,10,18,.94) 100%); pointer-events: none; }
.solution-card::after { content: ""; position: absolute; z-index: 2; top: 0; right: 28px; left: 28px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); pointer-events: none; }
.solution-card-copy { position: absolute; z-index: 3; right: clamp(22px, 3vw, 48px); bottom: clamp(22px, 3vw, 44px); left: clamp(22px, 3vw, 48px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; }
.solution-card-copy small { grid-column: 1 / -1; display: block; margin-bottom: -5px; color: var(--cyan-soft); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.solution-card-copy strong { max-width: 15ch; font-family: var(--display); font-size: clamp(3rem, 5vw, 5.8rem); font-weight: 400; line-height: .86; text-transform: uppercase; }
.solution-card-copy i { color: var(--cyan); font-size: 1.35rem; font-style: normal; transition: transform 250ms var(--ease-out); }
.motion-ready .solution-card { opacity: 0; transform: translateY(24px); }
.motion-ready .solution-card.is-visible { animation: solution-card-enter 760ms var(--ease-out) var(--solution-delay, 0ms) forwards; }
.solution-card:target { z-index: 2; box-shadow: inset 0 0 0 2px var(--cyan), 0 20px 52px rgba(0,0,0,.3); }
.solution-card:target::after { transform: scaleX(1); }

.solutions-close { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr); gap: clamp(40px, 8vw, 130px); align-items: end; padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(96px, 12vw, 180px); }
.solutions-close h2 { max-width: 10ch; margin: 0; font-family: var(--display); font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 400; line-height: .84; text-transform: uppercase; }
.solutions-close p { max-width: 49ch; margin: 0 0 28px; color: rgba(255,255,255,.67); font-size: .92rem; line-height: 1.78; }
.solutions-close a, .solution-dialog-copy > a { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 34px; padding: 14px 17px; color: var(--white); background: var(--brand-blue); font-size: .65rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transition: transform 200ms var(--ease-out), background-color 180ms ease; }
.solutions-close a span, .solution-dialog-copy > a span { color: var(--cyan-soft); font-size: 1rem; }

.solution-dialog { position: fixed; inset: 0 0 0 auto; width: min(980px, 92vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; overflow: hidden; padding: 0; color: var(--white); background: var(--ink); border: 0; opacity: 0; transform: translateX(48px); transition: opacity 260ms var(--ease-out), transform 460ms cubic-bezier(.32,.72,0,1), overlay 460ms allow-discrete, display 460ms allow-discrete; }
.solution-dialog::backdrop { background: rgba(0,7,14,.82); opacity: 0; transition: opacity 260ms ease, overlay 460ms allow-discrete, display 460ms allow-discrete; }
.solution-dialog[open].is-opening { opacity: 1; transform: translateX(0); }
.solution-dialog[open].is-opening::backdrop { opacity: 1; }
.solution-dialog.is-closing { opacity: 0; transform: translateX(48px); }
.solution-dialog.is-closing::backdrop { opacity: 0; }
.solution-dialog-panel { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); }
.solution-dialog-close { position: absolute; z-index: 5; top: 20px; right: 20px; display: grid; width: 48px; height: 48px; place-items: center; padding: 0; color: var(--white); background: rgba(4,16,29,.82); border: 1px solid rgba(255,255,255,.4); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 180ms ease; }
.solution-dialog-close span { font-size: 1.7rem; line-height: 1; transform: translateY(-1px); }
.solution-dialog-media { position: sticky; top: 0; height: 100dvh; overflow: hidden; margin: 0; background: var(--ink-3); }
.solution-dialog-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(2,10,18,.88)); pointer-events: none; }
.solution-dialog-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 180ms ease, transform 700ms var(--ease-out); }
.solution-dialog-media figcaption { position: absolute; z-index: 2; right: 28px; bottom: 26px; left: 28px; color: rgba(255,255,255,.8); font-size: .62rem; font-weight: 700; letter-spacing: .12em; line-height: 1.55; text-transform: uppercase; }
.solution-dialog-copy { align-self: start; min-width: 0; padding: clamp(90px, 10vw, 132px) clamp(28px, 5vw, 68px) 72px; }
.solution-dialog-label { margin: 0 0 18px; color: var(--cyan); font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.solution-dialog-copy h2 { margin: 0 0 28px; font-family: var(--display); font-size: clamp(4.4rem, 7vw, 7.5rem); font-weight: 400; line-height: .82; text-transform: uppercase; }
.solution-dialog-copy > p:not(.solution-dialog-label) { max-width: 51ch; margin-bottom: 30px; color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.76; }
.solution-dialog-frame { position: relative; margin: 0 0 32px; padding: 22px 24px; color: rgba(255,255,255,.78); background: rgba(49,135,198,.1); }
.solution-dialog-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--cyan),var(--cyan)) left top / 22px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) left top / 1px 22px no-repeat, linear-gradient(var(--cyan),var(--cyan)) right top / 22px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) right top / 1px 22px no-repeat, linear-gradient(var(--cyan),var(--cyan)) left bottom / 22px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) left bottom / 1px 22px no-repeat, linear-gradient(var(--cyan),var(--cyan)) right bottom / 22px 1px no-repeat, linear-gradient(var(--cyan),var(--cyan)) right bottom / 1px 22px no-repeat; clip-path: inset(0 100% 100% 0); }
.solution-dialog.is-opening .solution-dialog-frame::after { animation: solution-frame-draw 850ms var(--ease-out) 180ms forwards; }
.solution-dialog-frame p { margin: 0; font-size: .77rem; line-height: 1.7; }
.solution-dialog-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 34px; }
.solution-thumb { min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; background: var(--ink-3); border: 1px solid transparent; cursor: pointer; opacity: .55; transition: opacity 180ms ease, border-color 180ms ease; }
.solution-thumb img { width: 100%; height: 100%; object-fit: cover; }
.solution-thumb[aria-pressed="true"] { border-color: var(--cyan); opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .solutions-back:hover { color: var(--white); transform: translateX(-3px); }
  .solution-card:hover img { filter: saturate(1) brightness(.92); transform: scale(1.045); }
  .solution-card:hover::after { transform: scaleX(1); }
  .solution-card:hover .solution-card-copy i { transform: translate(4px, -4px); }
  .solutions-close a:hover, .solution-dialog-copy > a:hover { background: var(--brand-blue-deep); transform: translateY(-2px); }
  .solution-dialog-close:hover { background: var(--brand-blue); transform: scale(1.04); }
}

@keyframes solution-card-enter {
  from { opacity: 0; transform: translateY(24px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes solution-frame-draw {
  from { clip-path: inset(0 100% 100% 0); opacity: .25; }
  to { clip-path: inset(0); opacity: 1; }
}

@media (max-width: 900px) {
  .solutions-intro, .solutions-close { grid-template-columns: 1fr; gap: 34px; }
  .solutions-intro h1 { max-width: 11ch; }
  .solution-dialog { width: 100vw; }
  .solution-dialog-panel { grid-template-columns: 1fr; overflow-y: auto; }
  .solution-dialog-media { position: relative; height: min(64vh, 620px); }
}

@media (max-width: 640px) {
  .solutions-intro { padding-top: 60px; padding-bottom: 54px; }
  .solutions-back { margin-bottom: 26px; }
  .solutions-intro h1 { font-size: clamp(4.5rem, 23vw, 7rem); }
  .solutions-grid { grid-template-columns: 1fr; }
  .solution-card, .solution-card:nth-child(even) { aspect-ratio: 4 / 3; border-right: 0; }
  .solution-card-copy strong { max-width: 12ch; font-size: clamp(3.25rem, 15vw, 4.8rem); }
  .solutions-close h2 { font-size: clamp(4.2rem, 19vw, 6rem); }
  .solutions-close a { width: 100%; }
  .solution-dialog-panel { display: block; height: 100%; overflow-y: auto; }
  .solution-dialog-media { height: 48vh; min-height: 330px; }
  .solution-dialog-copy { padding: 54px 22px 70px; }
  .solution-dialog-copy h2 { font-size: clamp(4rem, 20vw, 6rem); }
  .solution-dialog-thumbs { gap: 5px; }
  .solution-dialog-copy > a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .solution-card { opacity: 1; transform: none; }
  .motion-ready .solution-card.is-visible, .solution-dialog.is-opening .solution-dialog-frame::after { animation: none; }
  .solution-card, .solution-card img, .solution-card::after, .solution-dialog, .solution-dialog::backdrop, .solution-dialog-media img { transition: none; }
  .solution-dialog-frame::after { clip-path: inset(0); }
}