@import url("../assets/framework-base.css");
.showcase { padding: clamp(28px, 6vw, 68px); }
.showcase-number { display: block; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.showcase > strong { position: relative; z-index: 2; display: block; max-width: 800px; margin-top: 20px; font-size: clamp(48px, 8vw, 105px); line-height: .85; letter-spacing: -.07em; }
.showcase > p { position: relative; z-index: 2; max-width: 420px; margin-top: 25px; color: #b9bec5; line-height: 1.5; }
.showcase-art { position: absolute; pointer-events: none; }

:root { --bg:#eeeae2; --paper:#f7f3eb; --ink:#151515; --muted:#6f6b65; --line:#bbb6ae; --accent:#f04646; --accent-2:#ffd8d4; --dark:#121212; --width:1260px; }
.site-header { background:linear-gradient(90deg,#181818 0 50%,#f7f3eb 50%); color:#fff; border:0; }
.site-header .nav-links a:nth-child(-n+3){color:#151515}.site-header .nav-links .nav-cta{color:#fff}
.brand svg{color:#f04646}.hero{background:linear-gradient(90deg,#181818 0 50%,#f7f3eb 50%)}
.hero-layout{width:100%;max-width:none;padding:0;grid-template-columns:1fr 1fr;gap:0}
.hero-copy{min-height:680px;padding:90px max(40px,calc((100vw - 1260px)/2));color:#fff;display:flex;flex-direction:column;justify-content:center}
.hero-copy>p:not(.eyebrow){color:#bbb}.hero-copy .button:not(.primary){color:#fff;border-color:#666}
.concept-stage{min-height:680px;border:0;background:transparent}
.split-stage{display:grid;height:100%;grid-template-columns:1fr 1fr;position:relative}
.old-side,.new-side{display:flex;padding:64px 40px;flex-direction:column;justify-content:flex-end}
.old-side{color:#888;background:repeating-linear-gradient(-45deg,#d8d3ca 0 1px,transparent 1px 16px)}
.new-side{color:#fff;background:#f04646}
.old-side small,.new-side small{margin-bottom:auto;font-size:10px;font-weight:900;letter-spacing:.15em}
.old-side strong,.new-side strong{font-size:42px;line-height:1}
.old-side span,.new-side span{margin-top:18px;font-size:14px;line-height:1.5}
.split-axis{position:absolute;z-index:2;left:50%;top:50%;display:grid;width:64px;height:64px;place-items:center;transform:translate(-50%,-50%);color:#fff;background:#151515;border-radius:50%;font-weight:900}
.feature-grid{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature{background:transparent;border:0;border-right:1px solid var(--line)}.feature:last-child{border:0}
.about-mark{background:linear-gradient(135deg,#181818 0 50%,#f04646 50%)}
.showcase{background:linear-gradient(90deg,#151515 0 50%,#f04646 50%)}
.showcase-art{inset:14%;border:2px solid #fff}.showcase-art:after{content:"OLD  /  NEW";position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(40px,9vw,120px);font-weight:900;letter-spacing:-.08em}
@media(max-width:820px){.site-header,.hero{background:#181818}.site-header .nav-links .nav-cta{display:block}.hero-layout{grid-template-columns:1fr}.hero-copy{min-height:0;padding:65px 20px}.concept-stage{min-height:480px}.feature{border-right:0;border-bottom:1px solid var(--line)}}