.solution-page {
  --page-accent: var(--orange);
  background: var(--ink);
}

.solution-page.accent-light { --page-accent: var(--acid); }
.solution-page.accent-led { --page-accent: #58dfff; }
.solution-page.accent-structure { --page-accent: #f2f0eb; }

.solution-page .section-number,
.solution-page .instagram-link span { color: var(--page-accent); }

.solution-page .site-header { background: linear-gradient(rgba(8,8,8,.65), transparent); }
.solution-page .site-header.scrolled { background: rgba(8,8,8,.86); }

.solution-nav { position: fixed; z-index: 30; right: 1.2rem; top: 50%; display: flex; flex-direction: column; gap: .55rem; transform: translateY(-50%); }
.solution-nav a { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.55); font-size: .64rem; font-weight: 700; transition: .25s; }
.solution-nav a:hover, .solution-nav a.active { color: var(--ink); background: var(--page-accent); border-color: var(--page-accent); }

.solution-hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: end; padding: 9rem var(--pad) 5rem; isolation: isolate; }
.solution-hero::before { content: ""; position: absolute; inset: -6%; z-index: -3; background: url("../assets/hero-poster.jpg") center/cover no-repeat; filter: grayscale(.75) contrast(1.18); transform: scale(1.06) translateY(var(--hero-y, 0px)); will-change: transform; }
.solution-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8,8,8,.95) 0%, rgba(8,8,8,.68) 56%, rgba(8,8,8,.35) 100%), linear-gradient(0deg, var(--ink) 0%, transparent 55%); }
.hero-noise { position: absolute; inset: 0; z-index: -1; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 8vw 8vw; mask-image: linear-gradient(90deg, #000, transparent); }
.solution-index { position: absolute; right: var(--pad); top: 23%; color: transparent; font: clamp(8rem, 24vw, 24rem)/.8 var(--display); letter-spacing: -.1em; -webkit-text-stroke: 1px rgba(255,255,255,.25); }
.solution-hero-inner { position: relative; z-index: 2; width: min(970px, 90%); }
.breadcrumb { display: flex; align-items: center; gap: .7rem; margin-bottom: 2rem; color: rgba(255,255,255,.65); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.breadcrumb i { width: 2.5rem; height: 1px; background: var(--page-accent); }
.solution-hero h1 { margin: 0; font: clamp(4rem, 13vw, 13rem)/.78 var(--display); letter-spacing: -.08em; text-transform: uppercase; }
.solution-hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--white); }
.solution-hero-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin: 2.8rem 0 0 clamp(0rem, 11vw, 8rem); }
.solution-hero-copy > p { max-width: 580px; margin: 0; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.45; }
.solution-meta { display: flex; flex-wrap: wrap; gap: .55rem; }
.solution-meta span { padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.3); font-size: .67rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.solution-line { position: absolute; right: 0; bottom: 0; width: 36%; height: 5px; background: var(--page-accent); }

.outcome { position: relative; overflow: hidden; color: var(--ink); background: var(--paper); }
.outcome-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 10vw, 10rem); align-items: start; }
.outcome-kicker { position: sticky; top: 8rem; }
.outcome .section-number { color: #6e6c66; }
.outcome-kicker p { max-width: 280px; margin-top: 2rem; color: #66635d; }
.outcome h2 { margin: 0; font: clamp(2.8rem, 6.4vw, 6.5rem)/.94 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.outcome h2 span { color: var(--page-accent); -webkit-text-stroke: 1px rgba(8,8,8,.4); }
.outcome .accent-dark { color: var(--ink); }
.outcome-lead { max-width: 680px; margin-top: 3rem; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.4; }
.outcome-copy { max-width: 680px; color: #66635d; }

.applications { background: #111; }
.applications-head { display: grid; grid-template-columns: 1fr .45fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.applications-head h2 { margin: 1rem 0 0; font: clamp(2.8rem, 7vw, 7rem)/.9 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.applications-head h2 span { color: var(--page-accent); }
.applications-head > p { color: var(--muted); }
.application-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.application-card { position: relative; min-height: 270px; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.application-card::after { content: attr(data-num); position: absolute; right: -.05em; bottom: -.24em; color: transparent; font: 9rem var(--display); -webkit-text-stroke: 1px rgba(255,255,255,.09); transition: color .35s, transform .35s; }
.application-card:hover::after { color: var(--page-accent); transform: translate(-.08em,-.04em); opacity: .9; }
.application-card h3 { max-width: 340px; margin: 0 0 1rem; font: clamp(1.45rem, 3vw, 2.5rem)/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.application-card p { position: relative; z-index: 1; max-width: 390px; color: var(--muted); }

.delivery { color: var(--ink); background: var(--page-accent); }
.delivery .section-number { color: var(--ink); opacity: .6; }
.delivery-head { display: grid; grid-template-columns: 1fr .55fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.delivery h2 { margin: 1rem 0 0; font: clamp(2.8rem, 7vw, 7rem)/.9 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.delivery-head p { opacity: .7; }
.delivery-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(8,8,8,.28); border: 1px solid rgba(8,8,8,.28); }
.delivery-step { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; background: var(--page-accent); }
.delivery-step > span { font: 3.6rem var(--display); opacity: .25; }
.delivery-step h3 { margin: 0 0 .7rem; font: 1.45rem var(--display); text-transform: uppercase; }
.delivery-step p { margin: 0; opacity: .7; }

.cross-sell { background: var(--ink); }
.cross-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.cross-head h2 { margin: 1rem 0 0; font: clamp(2.5rem, 6vw, 5rem)/.95 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.cross-links { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.cross-link { display: flex; align-items: center; justify-content: space-between; min-height: 7rem; padding: 0 1.2rem; border-bottom: 1px solid var(--line); font: clamp(1.15rem, 2.5vw, 2rem) var(--display); text-transform: uppercase; transition: .25s; }
.cross-link + .cross-link { border-left: 1px solid var(--line); }
.cross-link span { color: var(--page-accent); }
.cross-link:hover { color: var(--ink); background: var(--page-accent); padding-left: 1.7rem; }
.cross-link:hover span { color: var(--ink); }

.solution-cta { position: relative; overflow: hidden; min-height: 78svh; display: grid; place-items: center; padding: 8rem var(--pad); text-align: center; color: var(--white); background: #090909; }
.solution-cta::before { content: attr(data-word); position: absolute; color: transparent; font: clamp(10rem, 30vw, 30rem)/1 var(--display); letter-spacing: -.09em; -webkit-text-stroke: 1px rgba(255,255,255,.07); transform: rotate(-7deg); }
.solution-cta-inner { position: relative; z-index: 1; }
.solution-cta h2 { margin: 1rem 0 1.5rem; font: clamp(3.2rem, 9vw, 8.8rem)/.86 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.solution-cta h2 span { color: var(--page-accent); }
.solution-cta p { margin-bottom: 2rem; color: var(--muted); font-size: 1.15rem; }
.solution-page .button-primary { color: var(--ink); background: var(--page-accent); }
.solution-page .button-primary:hover { background: var(--white); }

@media (max-width: 900px) {
  .solution-nav { display: none; }
  .solution-hero-copy, .outcome-grid, .applications-head, .delivery-head { grid-template-columns: 1fr; }
  .solution-hero-copy { gap: 1.5rem; margin-left: 0; }
  .outcome-kicker { position: static; }
  .delivery-steps { grid-template-columns: 1fr; }
  .delivery-step { min-height: 230px; }
  .cross-links { grid-template-columns: 1fr; }
  .cross-link + .cross-link { border-left: 0; }
  .cross-link { min-height: 6rem; }
}

@media (max-width: 640px) {
  .solution-hero { min-height: 92svh; padding-bottom: 4rem; }
  .solution-hero h1 { font-size: clamp(3.8rem, 20vw, 6.5rem); }
  .solution-hero h1 .outline { -webkit-text-stroke-width: 1px; }
  .solution-index { top: 20%; right: .5rem; }
  .application-grid { grid-template-columns: 1fr; }
  .application-card { min-height: 240px; }
  .cross-head { align-items: start; flex-direction: column; }
}