/* ==========================================================================
   SAN Media Solution — Contact
   Two artworks, one page: `contact page 1.PNG` (1536 wide, Our Space — `--p`
   is one of its pixels) followed by the body of `contact page 2.PNG` (1024
   wide — `--q` is one of its pixels; its header is the site's own, so its
   sections start at the artwork's y = 58). Every measurement below is the
   artwork's.
   ========================================================================== */

.space, .touch, .how, .next, .foot {
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.space { --p: calc(100vw / 1536); --u: var(--p); }
.touch, .how, .next, .foot { --q: calc(100vw / 1024); }
.touch, .next { --u: var(--q); }
@supports (width: 1cqw) {
  .space { --p: calc(1cqw / 15.36); }
  .touch, .how, .next, .foot { --q: calc(1cqw / 10.24); }
}

/* ── shared pieces ─────────────────────────────────────────────────────── */
.c-kicker {
  display: flex; align-items: center;
  margin: 0;
  font-weight: 600; text-transform: uppercase; line-height: 1;
  color: #525253; white-space: nowrap;
}
.c-kicker i { display: block; background: var(--lime); }
.c-kicker--light { color: #e3e3e3; }
.c-rail { display: flex; align-items: center; margin: 0; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.c-rail i { display: block; background: var(--lime); }
.c-stats { margin: 0; padding: 0; list-style: none; color: #fff; }
.c-stats li { display: flex; align-items: flex-start; }
.c-stats svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.c-stats svg.is-fill { fill: currentColor; stroke: none; }
.c-stats b { display: block; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.c-stats em { display: block; font-style: normal; color: #cdcdcd; }
.c-foot { display: flex; align-items: center; justify-content: space-between; color: #fff; }
.c-brand { display: flex; align-items: center; text-decoration: none; color: #fff; }
.c-brand img { display: block; height: auto; }
.c-brand b { display: block; font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.c-brand b em { font-style: normal; color: var(--lime); }
.c-brand small { display: block; font-weight: 600; text-transform: uppercase; line-height: 1; letter-spacing: .22em; color: #9a9a9e; white-space: nowrap; }
.c-foot__line { display: flex; align-items: center; margin: 0; text-transform: uppercase; line-height: 1; white-space: nowrap; color: #919195; }
.c-foot__line i { display: block; height: 1px; background: #8d8d91; }
.c-go { display: flex; align-items: center; text-decoration: none; text-transform: uppercase; line-height: 1; color: #d0d0d0; white-space: nowrap; }
.c-go__ring { display: grid; place-items: center; border-radius: 50%; border: 1.2px solid #8a8a8e; color: #fff; transition: background .4s, color .4s, transform .5s var(--e-out); }
.c-go__ring svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.c-go:hover .c-go__ring, .c-go:focus-visible .c-go__ring { background: #fff; color: #0a0a0a; transform: translateX(3px); }

/* ══ Our Space ══════════════════════════════════════════════════════════ */
.space { height: calc(1024 * var(--p)); background: #fefefe; color: #111; }
.space.is-solo { padding-top: calc(94 * var(--p)); height: calc(1118 * var(--p)); }
.space__top { position: relative; height: calc(659 * var(--p)); }
.space__bracket {
  position: absolute;
  left: calc(-70 * var(--p)); top: calc(66 * var(--p));
  width: calc(100 * var(--p)); height: calc(165 * var(--p));
  border: calc(1.5 * var(--p)) solid var(--lime);
  border-radius: calc(16 * var(--p));
  pointer-events: none;
}
.space__copy { position: absolute; left: 0; top: 0; }
.space__kicker { position: absolute; left: calc(65 * var(--p)); top: calc(47 * var(--p)); gap: calc(18 * var(--p)); font-size: max(calc(13.5 * var(--p)), 10px); letter-spacing: .25em; }
.space__kicker i { width: calc(45 * var(--p)); height: calc(2 * var(--p)); }
.space__title {
  position: absolute; left: calc(64 * var(--p)); top: calc(84 * var(--p));
  margin: 0;
  font-size: calc(60 * var(--p)); font-weight: 800; line-height: calc(63 * var(--p)); letter-spacing: -.045em; text-transform: uppercase;
  color: #0a0a0a;
}
.space__title span { display: block; white-space: nowrap; }
.space__title em { font-style: normal; color: var(--lime); }
.space__sub { position: absolute; left: calc(65 * var(--p)); top: calc(285 * var(--p)); margin: 0; font-size: calc(20 * var(--p)); font-weight: 400; line-height: calc(28 * var(--p)); letter-spacing: -.012em; color: #1b1c1b; white-space: nowrap; }
.space__para { position: absolute; left: calc(65 * var(--p)); top: calc(361 * var(--p)); margin: 0; font-size: calc(16.5 * var(--p)); font-weight: 400; line-height: calc(23.5 * var(--p)); letter-spacing: -.01em; color: #6f7070; white-space: nowrap; }
.pill--space {
  position: absolute; left: calc(66 * var(--p)); top: calc(476 * var(--p));
  height: calc(48 * var(--p)); padding: 0 calc(24 * var(--p));
  gap: calc(20 * var(--p));
  font-size: calc(14.5 * var(--p)); font-weight: 500; letter-spacing: -.01em; text-decoration: none;
}
.pill--space svg { width: calc(20 * var(--p)); stroke-width: calc(1.8 * var(--p)); }
.space__script { position: absolute; left: calc(280 * var(--p)); top: calc(506 * var(--p)); width: calc(170 * var(--p)); height: auto; }
.space__stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* the studio's own photograph, in a still frame; the picture rises inside it */
.space__photo { position: absolute; left: calc(450 * var(--p)); top: calc(50 * var(--p)); width: calc(746 * var(--p)); height: calc(560 * var(--p)); border-radius: calc(18 * var(--p)); overflow: hidden; background: #e9e6e0; box-shadow: 0 calc(24 * var(--p)) calc(60 * var(--p)) rgba(20, 24, 10, .18); }
.space__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }

/* the list on the right */
.space__side { position: absolute; left: calc(1196 * var(--p)); top: 0; width: calc(308 * var(--p)); height: 100%; }
.space__side-kicker {
  position: absolute; left: calc(90 * var(--p)); top: calc(44.5 * var(--p));
  margin: 0;
  font-size: max(calc(11 * var(--p)), 9px); font-weight: 500; line-height: calc(17 * var(--p)); letter-spacing: .22em; text-transform: uppercase;
  color: #525253; white-space: nowrap;
}
.space__side-kicker span { display: block; }
.space__side-kicker i { display: block; width: calc(45 * var(--p)); height: calc(2 * var(--p)); margin-top: calc(12.5 * var(--p)); background: var(--lime); }
.space__list { margin: 0; padding: 0; list-style: none; }
.space__item { position: absolute; left: 0; width: 100%; height: calc(54 * var(--p)); }
.space__item:nth-child(1) { top: calc(140 * var(--p)); }
.space__item:nth-child(2) { top: calc(252 * var(--p)); }
.space__item:nth-child(3) { top: calc(365 * var(--p)); }
.space__item:nth-child(4) { top: calc(482 * var(--p)); }
.space__tile {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: calc(54 * var(--p)); height: calc(54 * var(--p));
  border-radius: calc(10 * var(--p));
  background: #eeeff1; box-shadow: inset 0 0 0 1px #e2e4e8, 0 calc(6 * var(--p)) calc(14 * var(--p)) rgba(0, 0, 0, .06);
  color: #111;
}
.space__tile svg { width: calc(27 * var(--p)); height: calc(27 * var(--p)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.space__item-text { position: absolute; left: calc(90 * var(--p)); top: calc(7 * var(--p)); }
.space__item-text b { display: block; font-size: calc(14.5 * var(--p)); font-weight: 700; line-height: 1; letter-spacing: -.015em; color: #0a0a0a; white-space: nowrap; }
.space__item-text > span { display: block; margin-top: calc(5 * var(--p)); font-size: max(calc(12.5 * var(--p)), 10px); font-weight: 400; line-height: calc(20 * var(--p)); color: #7b7a7b; white-space: nowrap; }
.space__num { position: absolute; right: 0; top: calc(11 * var(--p)); font-size: max(calc(11 * var(--p)), 9px); font-weight: 500; line-height: 1; letter-spacing: .12em; color: #7a7a7e; }
.space__rail { position: absolute; right: 0; top: calc(607 * var(--p)); gap: calc(14 * var(--p)); font-size: max(calc(13 * var(--p)), 10px); font-weight: 500; letter-spacing: .27em; color: #828286; }
.space__rail i { width: calc(1.5 * var(--p)); height: calc(10 * var(--p)); }

/* the band: our impact */
.space__band { position: relative; height: calc(365 * var(--p)); background: #0f0f0f; color: #fff; }
.band__copy { position: absolute; left: calc(65 * var(--p)); top: 0; }
.band__copy .c-kicker { position: absolute; left: 0; top: calc(39 * var(--p)); gap: calc(20 * var(--p)); font-size: max(calc(12 * var(--p)), 10px); letter-spacing: .3em; }
.band__copy .c-kicker i { width: calc(44 * var(--p)); height: calc(2 * var(--p)); }
.band__title {
  position: absolute; left: 0; top: calc(65 * var(--p));
  margin: 0;
  font-size: calc(60 * var(--p)); font-weight: 800; line-height: calc(58 * var(--p)); letter-spacing: -.04em; text-transform: uppercase;
  color: #fff;
}
.band__title span { display: block; white-space: nowrap; }
.band__title em { font-style: normal; color: var(--lime); }
.band__sub { position: absolute; left: 0; top: calc(188 * var(--p)); margin: 0; font-size: calc(17.5 * var(--p)); line-height: 1.3; letter-spacing: -.01em; color: #dddddd; white-space: nowrap; }
.band__stats { position: absolute; left: 0; top: calc(81 * var(--p)); right: 0; height: calc(84 * var(--p)); }
.band__stats li { position: absolute; top: calc(6 * var(--p)); gap: calc(19 * var(--p)); }
.band__stats li:nth-child(1) { left: calc(577 * var(--p)); }
.band__stats li:nth-child(2) { left: calc(754 * var(--p)); }
.band__stats li:nth-child(3) { left: calc(936 * var(--p)); }
.band__stats li:nth-child(4) { left: calc(1102 * var(--p)); }
.band__stats li::after { content: ""; position: absolute; top: calc(-6 * var(--p)); height: calc(84 * var(--p)); width: 1px; background: #444; }
.band__stats li:nth-child(1)::after { left: calc(140 * var(--p)); }
.band__stats li:nth-child(2)::after { left: calc(144 * var(--p)); }
.band__stats li:nth-child(3)::after { left: calc(135 * var(--p)); }
.band__stats li:nth-child(4)::after { left: calc(171 * var(--p)); }
.band__stats svg { width: calc(32 * var(--p)); height: calc(32 * var(--p)); margin: calc(-3 * var(--p)) 0 0 calc(-3 * var(--p)); }
.band__stats b { font-size: calc(26 * var(--p)); }
.band__stats em { margin-top: calc(11 * var(--p)); font-size: max(calc(13 * var(--p)), 10px); line-height: calc(18 * var(--p)); }
.band__quote { position: absolute; left: calc(1327 * var(--p)); top: calc(81.5 * var(--p)); margin: 0; }
.band__quote p { margin: 0; text-indent: calc(-15 * var(--p)); font-size: calc(18 * var(--p)); line-height: calc(32 * var(--p)); letter-spacing: -.01em; color: #f2f2f2; white-space: nowrap; }
.band__quote i { display: block; width: calc(45 * var(--p)); height: calc(2 * var(--p)); margin: calc(15 * var(--p)) 0 0 calc(-1 * var(--p)); background: var(--lime); }
.space__foot { position: absolute; left: calc(64 * var(--p)); right: calc(71 * var(--p)); top: calc(262 * var(--p)); height: calc(52 * var(--p)); justify-content: flex-end; }
.space__foot .c-foot__line { position: absolute; left: 0; top: calc(23 * var(--p)); gap: calc(60 * var(--p)); font-size: max(calc(11 * var(--p)), 9px); font-weight: 500; letter-spacing: .32em; }
.space__foot .c-foot__line i { width: calc(88 * var(--p)); }
.space__foot .c-go { gap: calc(19 * var(--p)); font-size: max(calc(11 * var(--p)), 9px); font-weight: 500; letter-spacing: .3em; }
.space__foot .c-go__ring { width: calc(43 * var(--p)); height: calc(43 * var(--p)); margin-top: calc(4 * var(--p)); }
.space__foot .c-go__ring svg { width: calc(14 * var(--p)); }

/* ══ Let’s build something that moves ══════════════════════════════════ */
.touch { height: calc(737 * var(--q)); background: #fcfcfc; color: #111; overflow: hidden; }
.touch.is-solo { margin-top: 94px; }
.touch__bracket {
  position: absolute;
  left: calc(-50 * var(--q)); top: calc(43 * var(--q));
  width: calc(74 * var(--q)); height: calc(133 * var(--q));
  border: calc(1.5 * var(--q)) solid var(--lime);
  border-radius: calc(12 * var(--q));
  pointer-events: none;
}
.touch__copy { position: absolute; left: 0; top: 0; }
.touch__kicker { position: absolute; left: calc(46 * var(--q)); top: calc(41 * var(--q)); gap: calc(11 * var(--q)); font-size: max(calc(8.5 * var(--q)), 8.5px); letter-spacing: .3em; color: #2a2a2a; }
.touch__kicker i { width: calc(40 * var(--q)); height: calc(1.5 * var(--q)); }
.touch__title {
  position: absolute; left: calc(45 * var(--q)); top: calc(61 * var(--q));
  margin: 0;
  font-size: calc(52 * var(--q)); font-weight: 800; line-height: calc(50 * var(--q)); letter-spacing: -.045em; text-transform: uppercase;
  color: #0a0a0a;
}
.touch__title span { display: block; white-space: nowrap; }
.touch__title em { font-style: normal; color: var(--lime); }
.touch__sub { position: absolute; left: calc(46 * var(--q)); top: calc(220 * var(--q)); margin: 0; font-size: calc(15 * var(--q)); line-height: calc(20 * var(--q)); letter-spacing: -.012em; color: #464747; white-space: nowrap; }

.touch__visual, .touch__cards { display: contents; }
.touch__orb { position: absolute; left: calc(440 * var(--q)); top: calc(92 * var(--q)); width: calc(265 * var(--q)); height: calc(640 * var(--q)); pointer-events: none; }
.touch__orb--soft { display: none; }
.touch__script { position: absolute; left: calc(648 * var(--q)); top: calc(54 * var(--q)); width: calc(188 * var(--q)); height: auto; }
.touch__vrule { position: absolute; left: calc(865 * var(--q)); top: calc(62 * var(--q)); width: 1px; height: calc(155 * var(--q)); background: #dfdfe2; }
.touch__more { position: absolute; left: calc(895 * var(--q)); top: calc(56 * var(--q)); margin: 0; font-size: max(calc(10 * var(--q)), 9px); font-weight: 500; line-height: calc(21 * var(--q)); letter-spacing: .2em; text-transform: uppercase; color: #7b797d; white-space: nowrap; }
.touch__more span { display: block; }
.touch__more i { display: block; width: calc(30 * var(--q)); height: calc(2 * var(--q)); margin-top: calc(22 * var(--q)); background: var(--lime); }
.touch__impact { position: absolute; left: calc(564 * var(--q)); top: calc(256 * var(--q)); margin: 0; font-size: max(calc(12 * var(--q)), 10px); font-weight: 800; line-height: calc(16 * var(--q)); letter-spacing: .12em; text-transform: uppercase; color: #111; white-space: nowrap; }
.touch__impact span { display: block; }

/* the form */
.form {
  position: absolute; left: calc(30 * var(--q)); top: calc(284 * var(--q));
  width: calc(440 * var(--q)); height: calc(435 * var(--q));
  box-sizing: border-box; padding: calc(25 * var(--q)) calc(27 * var(--q)) 0;
  border-radius: calc(16 * var(--q));
  background: #fff;
  box-shadow: 0 calc(12 * var(--q)) calc(34 * var(--q)) rgba(0, 0, 0, .08), 0 0 0 1px #ededf0;
  z-index: 2;
}
.form__head { display: flex; align-items: center; justify-content: space-between; height: calc(11 * var(--q)); }
.form__kicker { gap: calc(12 * var(--q)); font-size: max(calc(9 * var(--q)), 9px); font-weight: 700; letter-spacing: .25em; color: #1a1a1a; }
.form__kicker i { width: calc(41 * var(--q)); height: calc(1.5 * var(--q)); }
.form__ready { font-size: max(calc(9 * var(--q)), 9px); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1; color: #7a7a7e; white-space: nowrap; }
.form__field { position: absolute; left: calc(27 * var(--q)); right: calc(26 * var(--q)); display: block; }
.form__field:nth-of-type(1) { top: calc(49.5 * var(--q)); }
.form__field:nth-of-type(2) { top: calc(117.5 * var(--q)); }
.form__field:nth-of-type(3) { top: calc(186.5 * var(--q)); }
.form__field:nth-of-type(4) { top: calc(255.5 * var(--q)); }
.form__field > span { display: block; font-size: max(calc(11 * var(--q)), 9px); font-weight: 600; line-height: 1; letter-spacing: -.01em; color: #1a1a1a; }
.form__field input, .form__field textarea {
  display: block; box-sizing: border-box;
  width: 100%; height: calc(36 * var(--q));
  margin-top: calc(6.5 * var(--q)); padding: 0 calc(15 * var(--q));
  border: 1px solid #e4e6ea; border-radius: calc(8 * var(--q));
  background: #f7f8f9;
  font: inherit; font-size: max(calc(11 * var(--q)), 9px); line-height: 1.3; color: #111;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.form__field textarea { height: calc(85 * var(--q)); padding: calc(11 * var(--q)) calc(15 * var(--q)); resize: none; }
.form__field input::placeholder, .form__field textarea::placeholder { color: #a3a3a7; }
.form__field input:focus, .form__field textarea:focus { border-color: #98f014; box-shadow: 0 0 0 3px rgba(152, 240, 20, .25); background: #fff; }
.form__field input:user-invalid, .form__field textarea:user-invalid { border-color: #e55; }
.form__foot { position: absolute; left: calc(26 * var(--q)); right: calc(26 * var(--q)); top: calc(374 * var(--q)); display: flex; align-items: flex-start; }
.pill--form {
  appearance: none; -webkit-appearance: none; margin: 0;
  height: calc(38 * var(--q)); padding: 0 calc(18 * var(--q));
  gap: calc(14 * var(--q));
  font-family: inherit; font-size: max(calc(13.5 * var(--q)), 10px); font-weight: 700; letter-spacing: -.01em; text-decoration: none;
  border: 1.5px solid #0a0a0a; cursor: pointer;
}
.pill--form svg { width: calc(18 * var(--q)); stroke-width: 1.6px; }
.form__note { margin: calc(4.5 * var(--q)) 0 0 calc(34 * var(--q)); font-size: max(calc(9.5 * var(--q)), 9px); line-height: calc(14 * var(--q)); color: #7a7a7e; }

/* get in touch */
.git {
  position: absolute; left: calc(682 * var(--q)); top: calc(244 * var(--q));
  width: calc(314 * var(--q)); height: calc(470 * var(--q));
  border-radius: calc(14 * var(--q));
  background: #0b0e0e; color: #fff;
  z-index: 2;
}
.git__kicker { position: absolute; left: calc(33 * var(--q)); top: calc(30 * var(--q)); gap: calc(14 * var(--q)); font-size: max(calc(8.5 * var(--q)), 8.5px); letter-spacing: .33em; color: #f0f0f0; }
.git__kicker i { width: calc(30 * var(--q)); height: calc(1.5 * var(--q)); }
.git__list { margin: 0; padding: 0; list-style: none; }
.git__item { position: absolute; left: calc(32 * var(--q)); right: calc(26 * var(--q)); display: flex; align-items: center; }
.git__item:nth-child(1) { top: calc(56 * var(--q)); }
.git__item:nth-child(2) { top: calc(116 * var(--q)); }
.git__item:nth-child(3) { top: calc(179 * var(--q)); }
.git__item:nth-child(4) { top: calc(258 * var(--q)); }
.git__icon {
  flex: none; display: grid; place-items: center; align-self: flex-start;
  width: calc(42 * var(--q)); height: calc(42 * var(--q));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d6ff8a 0%, #9df01f 45%, #74d10a 100%);
  box-shadow: 0 calc(6 * var(--q)) calc(16 * var(--q)) rgba(152, 240, 20, .25);
  color: #0a1a00;
}
.git__icon svg { width: calc(19 * var(--q)); height: calc(19 * var(--q)); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.git__icon svg.is-fill { fill: currentColor; stroke: none; }
.git__text { flex: 1; margin-left: calc(18 * var(--q)); margin-top: calc(5.4 * var(--q)); align-self: flex-start; }
.git__text b { display: block; font-size: max(calc(11.5 * var(--q)), 9px); font-weight: 600; line-height: 1; letter-spacing: -.01em; color: #fff; }
.git__text > span { display: block; margin-top: calc(5.2 * var(--q)); font-size: max(calc(11 * var(--q)), 9px); line-height: calc(16 * var(--q)); color: #b1b2b3; white-space: nowrap; }
.git__go {
  flex: none; display: grid; place-items: center;
  width: calc(27 * var(--q)); height: calc(27 * var(--q));
  border-radius: 50%; border: 1.2px solid #cfcfcf;
  color: #fff; text-decoration: none;
  transition: background .35s, color .35s, transform .5s var(--e-out);
}
.git__go svg { width: calc(11 * var(--q)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.git__go:hover, .git__go:focus-visible { background: #fff; color: #0a0a0a; transform: translateX(2px); }
.git__rule { position: absolute; left: calc(32 * var(--q)); width: calc(256 * var(--q)); top: calc(340 * var(--q)); height: 1px; background: #2c2c2e; }
/* "Follow Our Journey" + the social icons: out of the markup until the profile addresses arrive */
.git__follow { position: absolute; left: calc(33 * var(--q)); top: calc(379.5 * var(--q)); }
.git__follow p { margin: 0; font-size: max(calc(11 * var(--q)), 9px); font-weight: 500; line-height: 1; color: #fff; white-space: nowrap; }
.git__social { display: flex; gap: calc(19 * var(--q)); margin-top: calc(16.5 * var(--q)) !important; }
.git__soc { display: block; width: calc(16 * var(--q)); height: calc(16 * var(--q)); color: #fff; }
.git__soc svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.git__soc svg.is-fill, .git__soc svg .is-fill { fill: currentColor; stroke: none; }
.git__soc[href]:hover { color: var(--lime); }
.git__script { position: absolute; left: calc(188 * var(--q)); top: calc(368 * var(--q)); width: calc(108 * var(--q)); height: auto; }

/* ══ How it works ═══════════════════════════════════════════════════════ */
.how { height: calc(278 * var(--q)); background: #fcfcfc; color: #111; }
.how__copy { position: absolute; left: 0; top: 0; }
.how__kicker { position: absolute; left: calc(52 * var(--q)); top: calc(34 * var(--q)); gap: calc(10 * var(--q)); font-size: max(calc(9 * var(--q)), 9px); font-weight: 700; letter-spacing: .36em; color: #1a1a1a; }
.how__kicker i { width: calc(39 * var(--q)); height: calc(2 * var(--q)); }
.how__title {
  position: absolute; left: calc(51 * var(--q)); top: calc(55 * var(--q));
  margin: 0;
  font-size: calc(36 * var(--q)); font-weight: 800; line-height: calc(37 * var(--q)); letter-spacing: -.045em; text-transform: uppercase;
  color: #0a0a0a;
}
.how__title span { display: block; white-space: nowrap; }
.how__title em { font-style: normal; color: var(--lime); }
.how__sub { position: absolute; left: calc(51 * var(--q)); top: calc(212 * var(--q)); margin: 0; font-size: calc(14.8 * var(--q)); line-height: 1.3; letter-spacing: -.012em; color: #2a2a2a; white-space: nowrap; }
.how__aside { position: absolute; left: calc(860 * var(--q)); top: calc(22 * var(--q)); margin: 0; font-size: max(calc(8.5 * var(--q)), 8.5px); font-weight: 500; line-height: calc(12 * var(--q)); letter-spacing: .2em; text-transform: uppercase; color: #6a6a6e; white-space: nowrap; }
.how__aside i { position: absolute; left: calc(112 * var(--q)); top: calc(16 * var(--q)); width: calc(28 * var(--q)); height: calc(1.5 * var(--q)); background: var(--lime); }
.steps { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; }
.steps__line { position: absolute; left: 0; top: calc(98 * var(--q)); width: 100%; height: calc(12 * var(--q)); }
.step { position: absolute; top: calc(70 * var(--q)); width: calc(160 * var(--q)); text-align: center; }
.step:nth-child(2) { left: calc(348 * var(--q)); }
.step:nth-child(3) { left: calc(507.7 * var(--q)); }
.step:nth-child(4) { left: calc(667.3 * var(--q)); }
.step:nth-child(5) { left: calc(827 * var(--q)); }
.step__ring {
  display: grid; place-items: center;
  width: calc(68 * var(--q)); height: calc(68 * var(--q)); margin: 0 auto;
  border-radius: 50%;
  background: #f4f4f6; box-shadow: inset 0 0 0 1px #e6e6ea, 0 calc(8 * var(--q)) calc(20 * var(--q)) rgba(0, 0, 0, .05);
  color: #111;
}
.step__ring svg { width: calc(28 * var(--q)); height: calc(28 * var(--q)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step__ring svg .is-fill { fill: currentColor; stroke: none; }
.step b { display: block; margin-top: calc(11 * var(--q)); font-size: max(calc(13.5 * var(--q)), 10px); font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #0a0a0a; }
.step__desc { display: block; margin-top: calc(9 * var(--q)); font-size: max(calc(10.5 * var(--q)), 9px); line-height: calc(15 * var(--q)); color: #737374; white-space: nowrap; }
.step em { display: block; margin-top: calc(14 * var(--q)); font-size: max(calc(13.5 * var(--q)), 10px); font-style: normal; line-height: 1; color: #333; }
.step:first-of-type em::after { content: ""; display: block; width: calc(13 * var(--q)); height: calc(1.5 * var(--q)); margin: calc(6 * var(--q)) auto 0; background: var(--lime); }

/* ══ Your next big idea ═════════════════════════════════════════════════ */
.next { height: calc(367 * var(--q)); background: #080c0b; color: #fff; overflow: hidden; }
.next__frame { display: contents; }
.next__photo { position: absolute; left: calc(480 * var(--q)); top: 0; width: calc(544 * var(--q)); height: calc(367 * var(--q)); }
.next__wall { position: absolute; left: calc(570 * var(--q)); top: calc(59.5 * var(--q)); margin: 0; font-size: max(calc(11.5 * var(--q)), 9px); font-weight: 700; line-height: calc(19.75 * var(--q)); letter-spacing: .12em; text-transform: uppercase; color: #f2f2f2; }
.next__wall span { display: block; }
.next__wall i { display: block; width: calc(30 * var(--q)); height: calc(1.5 * var(--q)); margin-top: calc(19.5 * var(--q)); background: var(--lime); }
.next__copy { position: absolute; left: 0; top: 0; }
.next__kicker { position: absolute; left: calc(56 * var(--q)); top: calc(42 * var(--q)); gap: calc(14 * var(--q)); font-size: max(calc(8.5 * var(--q)), 8.5px); letter-spacing: .25em; color: #dcdcdc; }
.next__kicker i { width: calc(39 * var(--q)); height: calc(1.5 * var(--q)); }
.next__title { position: absolute; left: calc(55 * var(--q)); top: calc(59.75 * var(--q)); margin: 0; font-size: calc(58 * var(--q)); font-weight: 800; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.next__title em { font-style: normal; color: var(--lime); }
.next__sub { position: absolute; left: calc(54 * var(--q)); top: calc(120.75 * var(--q)); margin: 0; font-size: calc(15.5 * var(--q)); line-height: calc(21 * var(--q)); letter-spacing: -.012em; color: #e2e4e3; white-space: nowrap; }
.pill--next {
  position: absolute; left: calc(53 * var(--q)); top: calc(181 * var(--q));
  height: calc(35 * var(--q)); padding: 0 calc(18 * var(--q));
  gap: calc(12 * var(--q));
  font-size: max(calc(13 * var(--q)), 10px); font-weight: 700; letter-spacing: -.01em; text-decoration: none;
}
.pill--next svg { width: calc(16 * var(--q)); stroke-width: 1.6px; }
.next__stats { position: absolute; left: 0; top: calc(264.5 * var(--q)); right: 0; height: calc(60 * var(--q)); }
.next__stats li { position: absolute; top: 0; gap: calc(6 * var(--q)); }
.next__stats li:nth-child(1) { left: calc(52 * var(--q)); }
.next__stats li:nth-child(2) { left: calc(198 * var(--q)); }
.next__stats li:nth-child(3) { left: calc(332 * var(--q)); }
.next__stats li:nth-child(4) { left: calc(451 * var(--q)); }
.next__stats li:not(:last-child)::after { content: ""; position: absolute; top: 0; height: calc(54 * var(--q)); width: 1px; background: #3a3a3c; }
.next__stats li:nth-child(1)::after { left: calc(120 * var(--q)); }
.next__stats li:nth-child(2)::after { left: calc(109 * var(--q)); }
.next__stats li:nth-child(3)::after { left: calc(96 * var(--q)); }
.next__stats svg { width: calc(22 * var(--q)); height: calc(22 * var(--q)); margin-top: calc(1 * var(--q)); }
.next__stats b { font-size: calc(18 * var(--q)); }
.next__stats em { margin-top: calc(7 * var(--q)); font-size: max(calc(10 * var(--q)), 9px); line-height: calc(14 * var(--q)); }

/* the footer row */
.foot { height: calc(96 * var(--q)); padding: 0 calc(49 * var(--q)) calc(43 * var(--q)) calc(44 * var(--q)); box-sizing: border-box; background: #080c0b; }
.foot .c-brand { gap: calc(7 * var(--q)); }
.foot .c-brand img { width: calc(40 * var(--q)); }
.foot .c-brand b { font-size: max(calc(10 * var(--q)), 9px); }
.foot .c-brand small { margin-top: calc(4 * var(--q)); font-size: max(calc(6.5 * var(--q)), 8.5px); letter-spacing: .3em; color: #a8a8ac; }
.foot .c-foot__line { position: absolute; left: 50%; top: calc(27 * var(--q)); translate: -50% -50%; gap: calc(12 * var(--q)); font-size: max(calc(8 * var(--q)), 8.5px); font-weight: 500; letter-spacing: .3em; color: #848585; }
.foot .c-foot__line i { width: calc(1.5 * var(--q)); height: calc(8 * var(--q)); background: var(--lime); }
.foot .c-foot__line i.c-foot__rule { width: calc(58 * var(--q)); height: 1px; background: #b8b8bb; }
.foot .c-foot__line i.c-foot__rule:first-child { margin-right: calc(22 * var(--q)); }
.foot .c-foot__line i.c-foot__rule:last-child { margin-left: calc(24 * var(--q)); }
.foot .c-go { gap: calc(13 * var(--q)); font-size: max(calc(8 * var(--q)), 8.5px); font-weight: 500; letter-spacing: .3em; }
.foot .c-go__ring { width: calc(33 * var(--q)); height: calc(33 * var(--q)); border-color: #b4b4b1; }
.foot .c-go__ring svg { width: calc(12 * var(--q)); }

/* ── entrances: contact.js plays them once, on entry ─────────────────────── */
.is-live [data-in], .is-live [data-visual], .is-live [data-item], .is-live [data-card], .is-live [data-side-in], .is-live [data-late],
.is-live [data-float], .is-live [data-panel], .is-live [data-row], .is-live [data-step], .is-live [data-wall], .is-live [data-photo] { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .space [data-in], .space [data-visual], .space [data-item], .space [data-card], .space [data-side-in], .space [data-late],
  .touch [data-in], .touch [data-visual], .touch [data-float], .touch [data-card], .touch [data-panel], .touch [data-row],
  .how [data-in], .how [data-step], .next [data-in], .next [data-card], .next [data-wall], .next [data-photo], .foot [data-late] { transform: none !important; opacity: 1 !important; }
}

/* ══ narrow screens: re-laid, not shrunk ═══════════════════════════════ */
@media (max-width: 1080px) {
  .space { --pad: clamp(20px, 4vw, 48px); height: auto; }
  .space.is-solo { padding-top: 0; height: auto; }
  .space__bracket { display: none; }
  .space__top { height: auto; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vh, 40px); padding: clamp(32px, 6vh, 64px) var(--pad) clamp(28px, 5vh, 48px); }
  .space__copy { position: static; display: grid; gap: 14px; justify-items: start; }
  .space__copy > *, .space__kicker { position: static !important; }
  .c-kicker { font-size: clamp(10.5px, 1.4vw, 13px); gap: 14px; }
  .c-kicker i { width: 44px; height: 2px; }
  .space__title { font-size: clamp(38px, 7.6vw, 78px); line-height: .98; }
  .space__title span { white-space: normal; }
  .space__sub { font-size: clamp(16px, 2.3vw, 22px); line-height: 1.35; white-space: normal; max-width: 34ch; }
  .space__para { font-size: clamp(14px, 1.9vw, 17px); line-height: 1.45; white-space: normal; max-width: 44ch; }
  .space__sub br, .space__para br { display: none; }
  .pill--space { position: relative; left: auto; top: auto; margin-top: 8px; height: clamp(44px, 5.4vw, 50px); padding: 0 clamp(22px, 3vw, 28px); gap: 14px; font-size: clamp(14px, 1.8vw, 16px); }
  .pill--space svg { width: 18px; stroke-width: 1.6px; }
  .space__script { width: clamp(120px, 16vw, 170px); margin: -6px 0 0 clamp(40px, 30vw, 300px); }
  .space__stage { position: relative; inset: auto; height: auto; overflow: visible; }
  .space__photo { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1774 / 887; border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 24, 10, .16); }
  .space__room { object-position: 50% 50%; }
  .space__side { position: static; width: auto; height: auto; display: grid; gap: 22px; }
  .space__side-kicker { position: static; font-size: clamp(10.5px, 1.4vw, 12px); line-height: 1.5; }
  .space__side-kicker i { width: 44px; height: 2px; margin-top: 10px; }
  .space__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .space__item { position: static !important; height: auto; display: grid; grid-template-columns: 54px 1fr auto; gap: 0 18px; align-items: start; }
  .space__tile { position: static; width: 54px; height: 54px; border-radius: 10px; }
  .space__tile svg { width: 27px; height: 27px; }
  .space__item-text { position: static; padding-top: 4px; }
  .space__item-text b { font-size: clamp(14px, 1.9vw, 17px); white-space: normal; }
  .space__item-text > span { margin-top: 7px; font-size: clamp(12.5px, 1.6vw, 14px); line-height: 1.45; white-space: normal; }
  .space__item-text br { display: none; }
  .space__num { position: static; padding-top: 6px; font-size: 11px; }
  .space__rail { position: static; justify-content: flex-start; gap: 12px; font-size: clamp(10.5px, 1.4vw, 12px); }
  .space__rail i { width: 1.5px; height: 10px; }

  .space__band { position: static; height: auto; padding: clamp(32px, 6vh, 56px) var(--pad) clamp(28px, 5vh, 44px); }
  .band__copy { position: static; }
  .band__copy .c-kicker { position: static; font-size: clamp(10.5px, 1.4vw, 13px); gap: 14px; }
  .band__copy .c-kicker i { width: 44px; height: 2px; }
  .band__title { position: static; margin-top: 14px; font-size: clamp(34px, 6vw, 62px); line-height: 1.02; }
  .band__title span { white-space: normal; }
  .band__sub { position: static; margin-top: 12px; font-size: clamp(15px, 2vw, 18px); white-space: normal; }
  .band__stats { position: static; height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; margin-top: clamp(24px, 4vh, 36px); }
  .band__stats li { position: static !important; gap: 12px; }
  .band__stats li::after { display: none; }
  .band__stats svg { width: 26px; height: 26px; margin-top: 0; }
  .band__stats b { font-size: clamp(20px, 3vw, 26px); }
  .band__stats em { margin-top: 6px; font-size: clamp(12px, 1.6vw, 13.5px); line-height: 1.3; }
  .band__quote { position: static; margin-top: clamp(22px, 3.6vh, 32px); padding-left: 15px; }
  .band__quote p { text-indent: -15px; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.5; white-space: normal; }
  .band__quote br { display: none; }
  .band__quote i { width: 44px; height: 2px; margin: 12px 0 0; }
  .space__foot { position: static; height: auto; margin-top: clamp(26px, 4.6vh, 40px); padding-top: 22px; border-top: 1px solid #2a2a2c; flex-wrap: wrap; gap: 16px 24px; }
  .space__foot .c-foot__line { position: static; order: 3; width: 100%; gap: 18px; font-size: clamp(9.5px, 1.2vw, 11px); }
  .space__foot .c-foot__line i { flex: 1; width: auto; }
  .space__foot .c-go { gap: 14px; font-size: 11px; }
  .space__foot .c-go__ring { width: 40px; height: 40px; margin-top: 0; }
  .space__foot .c-go__ring svg { width: 13px; }
}

@media (max-width: 1000px) {
  .touch, .how, .next, .foot { --pad: clamp(20px, 4vw, 48px); }
  .touch { height: auto; padding: clamp(36px, 6vh, 64px) var(--pad) clamp(36px, 6vh, 64px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vh, 40px); overflow: visible; }
  .touch.is-solo { margin-top: 0; }
  .touch__bracket { display: none; }
  .touch__copy { position: static; display: grid; gap: 14px; }
  .touch__kicker { position: static; color: #2a2a2a; }
  .touch__title { position: static; font-size: clamp(36px, 7.4vw, 74px); line-height: .98; }
  .touch__title span { white-space: normal; }
  .touch__sub { position: static; font-size: clamp(15px, 2vw, 18px); line-height: 1.45; white-space: normal; max-width: 58ch; }
  .touch__sub br { display: none; }
  /* the sphere hangs off the left edge of the screen, its lines and the script
     composed beside it — one picture with the copy, not a poster on its own */
  .touch { overflow-x: clip; }
  .touch__visual { position: relative; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; gap: 14px 24px; min-height: clamp(300px, 56vw, 470px); }
  .touch__orb { display: none; }
  .touch__orb--soft { display: block; position: absolute; left: calc(-1 * var(--pad) - 6vw); top: 50%; width: clamp(200px, 40vw, 330px); height: auto; translate: 0 -50%; grid-row: auto; }
  .touch__script { position: static; grid-column: 2; width: clamp(140px, 24vw, 200px); justify-self: start; }
  .touch__vrule { display: none; }
  .touch__more { position: static; grid-column: 2; font-size: clamp(9.5px, 1.3vw, 11px); line-height: 1.9; justify-self: start; text-align: left; }
  .touch__more i { margin: 10px auto 0 0; }
  .touch__impact { position: static; grid-column: 2; justify-self: start; text-align: left; font-size: clamp(11px, 1.5vw, 13px); line-height: 1.35; }
  .touch__cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 28px); align-items: start; }
  .form { position: static; width: auto; height: auto; padding: clamp(20px, 3vw, 28px); }
  .form__head { height: auto; flex-wrap: wrap; gap: 8px 16px; }
  .form__kicker { font-size: clamp(10px, 1.3vw, 12px); }
  .form__ready { font-size: clamp(8.5px, 1.1vw, 10px); }
  .form__field { position: static !important; margin-top: 16px; }
  .form__field > span { font-size: clamp(12px, 1.5vw, 13.5px); }
  .form__field input, .form__field textarea { height: 42px; margin-top: 8px; padding: 0 14px; border-radius: 9px; font-size: clamp(13px, 1.6vw, 14px); }
  .form__field textarea { height: 104px; padding: 12px 14px; }
  .form__foot { position: static; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
  .pill--form { height: 44px; padding: 0 22px; gap: 12px; font-size: clamp(13.5px, 1.7vw, 15px); }
  .pill--form svg { width: 18px; }
  .form__note { margin: 0; font-size: clamp(11px, 1.3vw, 12px); line-height: 1.4; }
  .form__note br { display: none; }
  .git { position: static; width: auto; height: auto; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px) clamp(22px, 3vw, 30px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 16px; align-items: center; }
  .git__kicker, .git__list, .git__rule { grid-column: 1 / -1; }
  .git__kicker { position: static; font-size: clamp(9.5px, 1.2vw, 11px); }
  .git__list { display: grid; gap: 16px; }
  .git__item { position: static !important; left: auto; right: auto; }
  .git__icon { width: 44px; height: 44px; }
  .git__icon svg { width: 20px; height: 20px; }
  .git__text { margin: 3px 0 0 14px; }
  .git__text b { font-size: clamp(13px, 1.6vw, 14.5px); }
  .git__text > span { margin-top: 5px; font-size: clamp(12px, 1.5vw, 13.5px); line-height: 1.4; white-space: normal; }
  .git__go { width: 30px; height: 30px; }
  .git__go svg { width: 12px; }
  .git__rule { position: static; width: 100%; }
  .git__follow { position: static; grid-column: 1; display: grid; gap: 12px; }
  .git__follow p { font-size: clamp(12px, 1.5vw, 13.5px); }
  .git__social { gap: 18px; margin-top: 0 !important; }
  .git__soc { width: 18px; height: 18px; }
  .git__script { position: static; grid-column: 2; width: clamp(80px, 12vw, 108px); }

  .how { height: auto; padding: clamp(36px, 6vh, 64px) var(--pad); display: grid; gap: clamp(24px, 4vh, 40px); }
  .how__copy { position: static; display: grid; gap: 14px; }
  .how__kicker { position: static; }
  .how__title { position: static; font-size: clamp(32px, 6vw, 60px); line-height: 1; }
  .how__title span { white-space: normal; display: inline; }
  .how__title span::after { content: " "; }
  .how__sub { position: static; font-size: clamp(15px, 2vw, 18px); white-space: normal; }
  .how__aside { position: static; order: -1; justify-self: end; text-align: right; font-size: clamp(9px, 1.2vw, 10.5px); line-height: 1.5; }
  .how__aside i { position: static; display: block; margin: 8px 0 0 auto; width: 28px; height: 1.5px; }
  .steps { position: static; height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .steps__line { display: none; }
  .step { position: static !important; width: auto; }
  .step__ring { width: 64px; height: 64px; }
  .step__ring svg { width: 26px; height: 26px; }
  .step b { margin-top: 12px; font-size: clamp(12.5px, 1.6vw, 14px); }
  .step__desc { margin-top: 8px; font-size: clamp(12px, 1.5vw, 13px); line-height: 1.4; white-space: normal; }
  .step__desc br { display: none; }
  .step em { margin-top: 12px; font-size: 13px; }

  .next { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vh, 36px); padding: clamp(36px, 6vh, 64px) var(--pad) clamp(32px, 6vh, 56px); }
  .next__frame { display: block; position: relative; order: 3; }
  .next__photo { position: static; display: block; width: 100%; height: auto; aspect-ratio: 544 / 367; object-fit: cover; border-radius: 12px; }
  .next__wall { position: absolute; z-index: 2; left: 6%; top: 16%; font-size: clamp(11px, 1.5vw, 13px); line-height: 1.6; }
  .next__wall i { margin-top: 12px; }
  .next__copy { position: static; display: grid; gap: 14px; justify-items: start; }
  .next__kicker { position: static; }
  .next__title { position: static; font-size: clamp(38px, 7.4vw, 74px); white-space: normal; }
  .next__sub { position: static; font-size: clamp(15px, 2vw, 18px); line-height: 1.45; white-space: normal; max-width: 52ch; }
  .next__sub br { display: none; }
  .pill--next { position: relative; left: auto; top: auto; margin-top: 6px; height: clamp(44px, 5.4vw, 50px); padding: 0 clamp(22px, 3vw, 28px); gap: 12px; font-size: clamp(14px, 1.8vw, 16px); }
  .pill--next svg { width: 18px; }
  .next__stats { position: static; height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
  .next__stats li { position: static !important; gap: 10px; }
  .next__stats li::after { display: none !important; }
  .next__stats svg { width: 24px; height: 24px; }
  .next__stats b { font-size: clamp(20px, 3vw, 26px); }
  .next__stats em { margin-top: 6px; font-size: clamp(12px, 1.6vw, 13.5px); line-height: 1.3; }

  /* the page ends here: room under the last line for the WhatsApp button */
  .foot { height: auto; padding: 22px var(--pad) 84px; flex-wrap: wrap; gap: 16px 24px; }
  .foot .c-brand { gap: 9px; }
  .foot .c-brand img { width: 40px; }
  .foot .c-brand b { font-size: 13px; }
  .foot .c-brand small { margin-top: 4px; font-size: 7px; }
  .foot .c-foot__line { position: static; translate: none; order: 3; width: 100%; gap: 12px; font-size: clamp(9px, 1.2vw, 10.5px); }
  .foot .c-foot__line i.c-foot__rule { flex: 1; width: auto; margin: 0 !important; }
  .foot .c-go { gap: 12px; font-size: 10.5px; }
  .foot .c-go__ring { width: 36px; height: 36px; }
  .foot .c-go__ring svg { width: 12px; }
}
@media (max-width: 720px) {
  .space__list { grid-template-columns: 1fr; }
  .band__stats, .next__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .touch__visual { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); min-height: clamp(300px, 94vw, 400px); gap: 12px 18px; }
  .touch__orb--soft { left: calc(-1 * var(--pad) - 12vw); width: clamp(190px, 58vw, 260px); }
  .touch__cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .next__wall { display: none; }
}
@media (max-width: 420px) {
  .steps { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: flex-start; }
}