/* Alture kit: warm off-white page, giant tight black Inter, one orange-red dot, a rounded black frame. */
:root { --paper: #f8f7f3; --ink: #000; --dot: #f3350c; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 500 16px/1.4 Inter, system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }

.sgrow { --sgrow-side-size: clamp(40px, 12vw, 150px); --sgrow-side-gap: .12em; }
.sgrow__side { font-weight: 600; letter-spacing: -.045em; line-height: .9; }
.sgrow__side--r::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .08em; border-radius: 50%; background: var(--dot); vertical-align: .08em; }
.sgrow__frame { background: #0c0b0a; }
.sgrow__media { overflow: hidden; }
.shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 88%; will-change: transform; }

.sgrow__play h2 { margin: 0; color: #fff; font-size: clamp(28px, 5.4vw, 60px); line-height: 1; font-weight: 600; letter-spacing: -.035em; }
.sgrow__play span { width: clamp(56px, 7vw, 80px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.sgrow__play span svg { margin-left: 4px; }
.tail { height: 30vh; }
.sgrow.is-static { --sgrow-static-ratio: .9; padding: clamp(16px, 4vw, 48px); min-height: 100vh; display: grid; align-content: center; box-sizing: border-box; }
.sgrow.is-static .sgrow__box { max-height: calc(100vh - 96px); margin: 0 auto; }
.sgrow.is-static .shot { object-position: 50% 58%; }