/*
 _______  _____          _____   ______ _______
 |       |     | |      |     | |_____/ |______
 |_____  |_____| |_____ |_____| |    \_ ______|

*/
:root {
  --studs-gray-00: #fafafa;
  --studs-gray-02: #f7f7f7;
  --studs-gray-05: #ededed;
  --studs-gray-10: #e5e5e5;
  --studs-gray-15: #d9d9d9;
  --studs-gray-20: #c2c2c2;
  --studs-gray-30: #a9a9a9;
  --studs-gray-40: #959595;
  --studs-gray-50: #757575;
  --studs-gray-60: #686868;
  --studs-gray-70: #565656;
  --studs-gray-80: #3f3f3f;
  --studs-gray-90: #2e2e2e;
  --studs-gray-100: #1d1d1d;
  --studs-white: #ffffff;
  --studs-black: #000000;
  --studs-orange-00: #FFF2EC;
  --studs-orange-05: #FFE7DB;
  --studs-orange-10: #FFDACA;
  --studs-orange-20: #FFBA9C;
  --studs-orange-30: #FF9162;
  --studs-orange-40: #E56D39;
  --studs-orange-50: #DF4907;
  --studs-orange-60: #B23A06;
  --studs-orange-70: #9A3205;
  --studs-orange-80: #7C2904;
  --studs-orange-90: #4C1902;
  --studs-orange-100: #361102;
  --studs-success-00: #F2FFF4;
  --studs-success-05: #CBF9D1;
  --studs-success-10: #A6F3B0;
  --studs-success-20: #76E184;
  --studs-success-30: #4CCF5D;
  --studs-success-40: #28BD3B;
  --studs-success-50: #29A039;
  --studs-success-60: #288234;
  --studs-success-70: #24652C;
  --studs-success-80: #1D4822;
  --studs-success-90: #132A16;
  --studs-success-100: #060D07;
  --studs-error-00: #FFF2F2;
  --studs-error-05: #FFD3D3;
  --studs-error-10: #FFB2B2;
  --studs-error-20: #FF8181;
  --studs-error-30: #FB5454;
  --studs-error-40: #F32828;
  --studs-error-50: #EB0000;
  --studs-error-60: #BF1313;
  --studs-error-70: #921D1D;
  --studs-error-80: #661E1E;
  --studs-error-90: #391717;
  --studs-error-100: #0D0606;
  --studs-warning-00: #FFFCF2;
  --studs-warning-05: #FFF3BE;
  --studs-warning-10: #FFE988;
  --studs-warning-20: #FFD246;
  --studs-warning-30: #FBBD08;
  --studs-warning-40: #D9A715;
  --studs-warning-50: #B7901E;
  --studs-warning-60: #957823;
  --studs-warning-70: #735F22;
  --studs-warning-80: #51441E;
  --studs-warning-90: #2F2814;
  --studs-warning-100: #0D0B06;
  --studs-info-00: #F2F8FF;
  --studs-info-05: #D3E8FF;
  --studs-info-10: #B1D7FF;
  --studs-info-20: #82B9FF;
  --studs-info-30: #559CFF;
  --studs-info-40: #2981FA;
  --studs-info-50: #0066F4;
  --studs-info-60: #145EC6;
  --studs-info-70: #1E5198;
  --studs-info-80: #203E69;
  --studs-info-90: #18263B;
  --studs-info-100: #060D07;
  --studs-focus: #1d9bf0;
}

@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/9baef9a5-e2af-4838-a3bc-da9d36c0bde8.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/4bff1fbb-b4bf-4d95-9c47-efcb14384e36.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/7f1f2a7d-3837-4c93-b373-f03c5da3f9a1.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/d9f2752a-8d82-4cf1-b82f-109c1105be7f.svg#d9f2752a-8d82-4cf1-b82f-109c1105be7f") format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/766b9874-e171-4f44-8d0b-92de006b3477.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/6a815361-6e47-4eaa-8b82-06b76eca6684.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/fdfa66bc-eaee-412a-b193-5b24b4c3b1aa.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/52604114-1d29-4bbc-8473-b62681fbbb4e.svg#52604114-1d29-4bbc-8473-b62681fbbb4e") format("svg");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/aff68211-86bb-476d-882e-f7a3face144c.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/50d35bbc-dfd4-48f1-af16-cf058f69421d.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/278bef59-6be1-4800-b5ac-1f769ab47430.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/2e309b1b-08b8-477f-bc9e-7067cf0af0b3.svg#2e309b1b-08b8-477f-bc9e-7067cf0af0b3") format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/259bda14-7f43-47ac-b7ac-2baa71dbc05f.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/b6d63cb7-64b5-4d39-beaf-a8d9fe5eb1df.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/284ad777-0022-42a3-9197-c449457c670a.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/202b6353-ffff-45b1-9a1a-89497323d7ed.svg#202b6353-ffff-45b1-9a1a-89497323d7ed") format("svg");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/5a13f7d1-b615-418e-bc3a-525001b9a671.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/530dee22-e3c1-4e9f-bf62-c31d510d9656.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/688ab72b-4deb-4e15-a088-89166978d469.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/7816f72f-f47e-4715-8cd7-960e3723846a.svg#7816f72f-f47e-4715-8cd7-960e3723846a") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/09f28057-e848-49b3-94bf-bfaefff51b64.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/8e9ee02b-f337-4f13-ad6c-969d6d6536c8.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/beddbbc6-203e-4f36-8960-3f5ca22af567.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/af177436-d9e8-44e8-9c9c-ef2d945f20a3.svg#af177436-d9e8-44e8-9c9c-ef2d945f20a3") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/b0868b4c-234e-47d3-bc59-41ab9de3c0db.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/bcf54343-d033-41ee-bbd7-2b77df3fe7ba.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/b0ffdcf0-26da-47fd-8485-20e4a40d4b7d.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/da09f1f1-062a-45af-86e1-2bbdb3dd94f9.svg#da09f1f1-062a-45af-86e1-2bbdb3dd94f9") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/462d508d-efc7-478f-b84e-288eeb69a160.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/2c056da8-4920-4e20-8c69-8a6b315458a9.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/2381d918-136d-444f-8391-db0cba6da388.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/d0697971-6f58-4597-942e-8beabd1adc87.svg#d0697971-6f58-4597-942e-8beabd1adc87") format("svg");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/3600b37f-2bf1-45f3-be3a-03365f16d9cb.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/60be5c39-863e-40cb-9434-6ebafb62ab2b.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/4c6503c9-859b-4d3b-a1d5-2d42e1222415.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/36c182c6-ef98-4021-9b0d-d63122c2bbf5.svg#36c182c6-ef98-4021-9b0d-d63122c2bbf5") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/9a31d352-a4be-4540-a6f2-f4ea3ea77d94.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/5f0efe11-b07a-49fc-ab86-7af6152fa368.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/fea58e5b-b0a7-43f7-8928-fc0639365852.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/398e1bb8-f2eb-41d5-b3b6-b9a889b52ee7.svg#398e1bb8-f2eb-41d5-b3b6-b9a889b52ee7") format("svg");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/3b303641-706e-4221-94c4-4fb491f4f8ef.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/14ff6081-326d-4dae-b778-d7afa66166fc.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/8fda1e47-19be-46c7-8d83-8d4fb35572f0.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/f751c8ae-1057-46d9-8d74-62592e002568.svg#f751c8ae-1057-46d9-8d74-62592e002568") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/d73c0f40-68f5-479e-9170-34a47382ed7a.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/628a0837-f9e0-4b32-83c4-d99689b9da93.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/4d9ecce0-f253-49fd-8623-b0f896b12794.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/dcdd4c31-466f-43f5-85c9-9bcdcd814139.svg#dcdd4c31-466f-43f5-85c9-9bcdcd814139") format("svg");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/350011f3-eda3-421c-b757-87d55f1e2c04.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/a0d9d2cb-f057-4e8d-a957-27853630f58e.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/54085041-5049-4b91-939c-49980c66abab.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/7a48747c-74f2-49a8-bb65-1c522d4aa618.svg#7a48747c-74f2-49a8-bb65-1c522d4aa618") format("svg");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/ce053fc5-0a39-47b7-ad48-5d47647548e0.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/eb32ec0b-c520-4a30-8777-e19326236901.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/2d92bb71-9a10-499c-954f-8b61e8dd47f1.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/e425d5b6-a4c5-4e1c-b29a-9a5b467b9645.svg#e425d5b6-a4c5-4e1c-b29a-9a5b467b9645") format("svg");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("https://www.strongtie.com/_ui/fonts/fd05322c-bf43-4f8e-a129-24869b0942db.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/74649485-cd74-443e-9d54-331ccd448900.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/feb77f4f-9e6b-4f88-909a-66199fd402ed.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/2e490192-e531-4236-9c55-90daaad4a34e.svg#2e490192-e531-4236-9c55-90daaad4a34e") format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/b37ddbd9-24db-4864-9095-5084a5679dd2.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/42aacb2f-222e-46f5-a95a-1c22948ee0d1.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/217a2f81-1e65-4924-a0d4-05ac8576f883.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/5405647d-099e-47f7-9d4a-f8692e57a206.svg#5405647d-099e-47f7-9d4a-f8692e57a206") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/b09e4e25-a1e7-4c68-a112-a57e4565f615.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/aa6913f7-e674-4d61-973b-002422ac447e.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/857b0b99-c6b3-4ad8-a049-28506caba502.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/af9d9c5b-b4f4-4d6f-9809-26fb6a2bb794.svg#af9d9c5b-b4f4-4d6f-9809-26fb6a2bb794") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/88a238be-6477-4e71-bdc4-5a35bbf8d392.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/842088d0-1ae2-40d0-8561-3c95761ba7a6.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/c74505d5-13e8-47ed-94a8-630aab4da3e6.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/6cd480d1-47d0-48b4-86bd-283db2cb9235.svg#6cd480d1-47d0-48b4-86bd-283db2cb9235") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/eb54f9e6-898d-4205-be8b-89539819a228.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/62667cf4-401a-4878-83c9-4cfabc21ac51.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/e7e2d460-5cf5-4bd1-b1a3-efdb8490bc94.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/b11cea27-f24b-43bf-a74f-f69ae0ef7fa7.svg#b11cea27-f24b-43bf-a74f-f69ae0ef7fa7") format("svg");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/423db818-6ba7-4789-995f-1f2d7f6018df.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/aef05e22-e1d4-4e59-bc2e-a71c13c26cca.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/b785b1cf-24fa-44c9-8c93-d8e2d6912c47.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/5ab0c585-fb4b-43d9-abb0-b92f452b1284.svg#5ab0c585-fb4b-43d9-abb0-b92f452b1284") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/75fb6581-1d0d-4f94-8460-29bcb3fa864a.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/08168171-ce66-4a8c-ae2c-720f44ea63ea.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/d9b14ee9-cc93-4033-894c-cb00960ace98.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/5f8c937b-8250-40b4-a74f-356cbc41ac9a.svg#5f8c937b-8250-40b4-a74f-356cbc41ac9a") format("svg");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/ab23c239-fb66-406e-bce6-f0f260f5a217.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/102ab74c-0e84-4fe5-a17a-b20fb643591a.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/1d146b29-55e2-485b-96aa-5cb628e7e9eb.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/d90b3358-e1e2-4abb-ba96-356983a54c22.svg#d90b3358-e1e2-4abb-ba96-356983a54c22") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("https://www.strongtie.com/_ui/fonts/ff14b8ac-2eb4-4d50-b330-e3e0afb4d8f5.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/5287baae-f2f0-48f7-98bd-ec2986854951.woff") format("woff"), url("https://www.strongtie.com/_ui/fonts/e6ab5bf0-c0a7-4aeb-a5d0-50177e6b354b.ttf") format("truetype"), url("https://www.strongtie.com/_ui/fonts/38074018-c2af-4832-8ffa-02293e606fb7.svg#38074018-c2af-4832-8ffa-02293e606fb7") format("svg");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "HelveticaNeueExtended";
  src: url("https://www.strongtie.com/_ui/fonts/NeueHelvetica73ExtendedBold_normal_normal.woff2") format("woff2"), url("https://www.strongtie.com/_ui/fonts/NeueHelvetica73ExtendedBold_normal_normal.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  src: url("https://s2-www.strongtie.com/_ui/fonts/material-icons/MaterialIconsOutlined-Regular.otf") format("otf");
  src: url("https://s2-www.strongtie.com/_ui/fonts/material-icons/MaterialIcons-Regular.ttf") format("truetype");
}
:root {
  --font-size: 1rem;
  --font-body: normal var(--font-weight) var(--font-size)/1.35 var(--font-family);
  --font-italic: italic var(--font-weight) var(--font-size)/1.35 var(--font-family);
  --font-banner: normal 700 var(--font-size)/1.35 var(--font-family);
  --font-heading: normal 700 var(--font-size)/1.35 var(--font-family-extended);
}

:root {
  --font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  --font-family-extended: "HelveticaNeueExtended", "Helvetica", "Arial", sans-serif;
  --font-weight: 500;
  --font-size: 16px;
  --font-style: normal;
  --padding: 2rem;
  --content-width: min(760px, 100vw - (var(--padding) * 2));
  --content-wide: min(1200px, 100vw - (var(--padding) * 2));
  --content-mid: min(1034px, 100vw - (var(--padding) * 2));
  --border-radius-sm: .125em;
  --border-radius-md: .25em;
  --border-radius-lg: .5em;
  --border-radius-xl: 3em;
}

:root {
  color-scheme: light dark;
  --studs-primary: var(--studs-orange-50);
  --studs-on-primary: var(--studs-white);
  --studs-primary-hover: var(--studs-orange-40);
  --studs-primary-active: var(--studs-orange-60);
  --studs-app: var(--studs-white);
  --studs-on-app: var(--studs-gray-90);
  --studs-base: var(--studs-gray-05);
  --studs-on-base: var(--studs-gray-90);
  --studs-surface: var(--studs-gray-02);
  --studs-surface-hover: var(--studs-gray-05);
  --studs-on-surface: var(--studs-gray-90);
  --studs-heading-color: var(--studs-gray-30);
  --studs-text: var(--studs-on-surface);
  --studs-text-inverted: var(--studs-white);
  --studs-border: var(--studs-gray-10);
  --studs-primary-subtle: var(--studs-orange-10);
  --studs-primary-subtle-hover: var(--studs-orange-05);
  --h: 18;
  --s: 94%;
  --l: 45%;
  --transition-s: 0.1s;
  --transition-m: 0.25s;
  --transition-l: 0.4s;
  --transition-x: 0.6s;
  --transition-xx: 1s;
  --interactive-feedback: translateY(-.075em) scale(1.01);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-s: 0s;
    --transition-m: 0s;
    --transition-l: 0s;
    --transition-x: 0s;
    --transition-xx: 0s;
    --interactive-feedback: translateY(0) scale(1);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --studs-primary: var(--studs-orange-50);
    --studs-on-primary: var(--studs-white);
    --studs-primary-hover: var(--studs-orange-40);
    --studs-primary-active: var(--studs-orange-60);
    --studs-app: var(--studs-white);
    --studs-on-app: var(--studs-gray-90);
    --studs-base: var(--studs-gray-05);
    --studs-on-base: var(--studs-gray-90);
    --studs-surface: var(--studs-gray-02);
    --studs-surface-hover: var(--studs-gray-05);
    --studs-on-surface: var(--studs-gray-90);
    --studs-heading-color: var(--studs-gray-30);
    --studs-text: var(--studs-on-surface);
    --studs-text-inverted: var(--studs-white);
    --studs-border: var(--studs-gray-10);
    --studs-primary-subtle: var(--studs-orange-10);
    --studs-primary-subtle-hover: var(--studs-orange-05);
    --h: 18;
    --s: 94%;
    --l: 45%;
  }
}

html {
  box-sizing: border-box;
}

*, :after, :before {
  box-sizing: inherit;
} /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: 700;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

h1, h2, h3, h4 {
  --font-size: clamp(1.125rem, 6vw, 2.5rem);
  --font-weight: 700;
  --fontFam: var(--font-family);
  font: normal var(--font-weight) var(--font-size)/1.35 var(--fontFam);
  margin: 0;
  margin-bottom: 1em;
  color: currentcolor;
}

:scope {
  --cardBkg: url("../img/icon-infrastructure.svg");
  --iconOpacity: .06;
}
:scope .-infrastructure {
  --cardBkg: url("../img/icon-infrastructure.svg");
}
:scope .-data {
  --cardBkg: url("../img/icon-data-insights.svg");
}
:scope .-services {
  --cardBkg: url("../img/icon-common-srvs.svg");
}
:scope .-internalDev {
  --cardBkg: url("../img/icon-internal-dev2.svg");
}
:scope .-unifiedExp {
  --cardBkg: url("../img/icon-unified-exp.svg");
}

#cardScroller {
  overflow: clip;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-left: calc(50vw - var(--content-wide) / 2);
  translate: 0;
  transition: translate 1.3s;
}
.cards.-slide {
  translate: -86%;
}
.cards .card {
  --translate: 0 0;
  padding: 0.5rem;
  border-radius: 0.25em;
  height: min(46.4vh, 500px);
  width: min(36.5vw, 400px);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  background: var(--studs-primary);
  color: var(--studs-on-primary);
  translate: var(--translate);
}
.cards .card .openWidget {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  font-size: 2rem;
  color: var(--studs-primary);
  background-color: rgba(255, 255, 255, 0.6);
  width: 1em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1em;
  transition: all 0.3s;
}
.cards .card .openWidget svg {
  width: 0.9em;
  display: inline-block;
  z-index: 2;
}
@media (max-width: 650px) {
  .cards .card .openWidget {
    font-size: 1.5rem;
  }
}
.cards .card:hover {
  --iconOpacity: .2;
}
.cards .card:hover .openWidget {
  background-color: rgb(255, 255, 255);
}
.cards .card h2 {
  font-size: clamp(1.125rem, 3vw, 2.5rem);
}
.cards .card h4 {
  font-size: clamp(1.1rem, 3vw, 1.25rem);
}
.cards .card .summary {
  margin-top: auto;
  z-index: 2;
}
.cards .card .summary::before {
  --padding: .5rem;
  content: "";
  position: absolute;
  top: var(--padding);
  left: var(--padding);
  right: var(--padding);
  bottom: var(--padding);
  background-image: var(--cardBkg);
  background-repeat: no-repeat;
  background-size: min(80%, 300px);
  background-position: center 10%;
  opacity: var(--iconOpacity);
  transition: opacity 0.3s;
}
.cards.-slideup .card {
  --slider: 0 0;
}

#infoArrows,
#directionArrows {
  padding-block: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.directionWrapper {
  border: 2px solid var(--studs-border);
  color: var(--studs-text-inverted);
  background: var(--studs-gray-05);
  padding: 0.25rem;
  border-radius: 4rem;
  display: flex;
  gap: 0.5rem;
}
.directionWrapper svg {
  width: 2rem;
}

#infoLeft,
#infoRight,
#arrowLeft,
#arrowRight {
  background-color: var(--studs-gray-80);
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s;
}
#infoLeft.-disabled,
#infoRight.-disabled,
#arrowLeft.-disabled,
#arrowRight.-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#infoLeft:hover:not(.-disabled),
#infoRight:hover:not(.-disabled),
#arrowLeft:hover:not(.-disabled),
#arrowRight:hover:not(.-disabled) {
  background-color: var(--studs-gray-100);
}

#infoLeft svg,
#arrowLeft svg {
  rotate: 180deg;
}

.unifiedCards {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  gap: 1fr;
}
.unifiedCards .displayText {
  min-height: 8rem;
  font-size: 1.25rem;
  text-align: center;
  margin: 4rem auto;
  width: var(--content-width);
}
@media (max-width: 961px) {
  .unifiedCards {
    margin-block: 2rem;
  }
  .unifiedCards .displayText {
    display: none;
  }
}

.thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--padding) / 2);
}
@media (max-width: 960px) {
  .thumbnails {
    grid-template-columns: 1fr;
  }
}
.thumbnails .thumbnail {
  background-color: var(--studs-surface);
  border-radius: calc(var(--padding) / 4);
  color: var(--studs-on-surface);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  gap: var(--padding);
  padding: calc(var(--padding) / 2);
}
.thumbnails .thumbnail:hover {
  background-color: var(--studs-surface-hover);
}
@media (min-width: 961px), (max-height: 961px) {
  .thumbnails .thumbnail.-active {
    background-color: var(--studs-primary);
    color: var(--studs-on-primary);
  }
}
.thumbnails .thumbnail .icon {
  width: 40px;
}
.thumbnails .thumbnail h4 {
  --font-weight: 600;
  --font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.thumbnails .text {
  display: none;
}
@media (max-width: 960px) {
  .thumbnails .text {
    display: block;
  }
}

dialog::backdrop {
  background: rgba(50, 50, 50, 0.5);
  backdrop-filter: blur(5px);
}
dialog.details {
  background: var(--studs-app);
  border-radius: calc(var(--padding) / 2);
  border: none;
  padding: 0px;
  overflow-x: clip;
  overscroll-behavior: contain;
  color: var(--studs-on-app);
  max-width: var(--content-wide);
  max-height: 90vh;
  box-shadow: 0 0 36px rgba(0, 0, 0, 0.6);
}
@media (max-width: 800px), (max-height: 800px) {
  dialog.details {
    max-height: 100dvh;
    max-width: 100vw;
    height: 100dvh;
    width: 100dvw;
    border-radius: 0px;
  }
}
dialog.details .detailsWrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
dialog.details .closeButton {
  color: var(--studs-primary);
  background: var(--studs-app);
  width: 45px;
  grid-row: 1;
  justify-self: end;
  margin: 0.5rem;
  cursor: pointer;
  border: 1px solid var(--studs-primary);
  border-radius: 50%;
  padding: 0;
  position: sticky;
  top: 1rem;
  right: 1rem;
  margin-left: auto;
  z-index: 100;
  transition: all 0.2s;
}
dialog.details .closeButton svg {
  display: block;
}
dialog.details .closeButton:hover {
  background: var(--studs-primary-subtle-hover);
}
dialog.details .detailsContent {
  grid-row: 2;
  --font-size: clamp(16px, 1.6vw, 20px);
}
dialog header {
  padding-inline: var(--padding);
  display: grid;
  grid-template-columns: 60fr 46fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 800px) {
  dialog header {
    grid-template-columns: 1fr;
  }
}
dialog header h2 {
  text-align: left;
  margin: 0;
}
dialog header p {
  margin-block: 0;
}
dialog .banner {
  background: var(--studs-primary);
  height: clamp(32px, 15vw, 220px);
  width: 100%;
  position: relative;
}
dialog .banner::before {
  --padding: .75rem;
  content: "";
  position: absolute;
  top: var(--padding);
  left: var(--padding);
  right: var(--padding);
  bottom: var(--padding);
  background-image: var(--cardBkg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  opacity: 0.075;
}
dialog .detailsContents {
  padding-inline: var(--padding);
  margin-block: 3rem;
}
dialog .detailsContents.-infrastructure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2rem;
}
dialog .detailsContents.-services .river, dialog .detailsContents.-data .river {
  margin-block: calc(var(--padding) * 4);
  display: grid;
  gap: calc(var(--padding) * 2);
  transition: all 0.3s;
}
dialog .detailsContents.-services .riverContent, dialog .detailsContents.-data .riverContent {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 700px) {
  dialog .detailsContents.-services .-l,
  dialog .detailsContents.-services .-r, dialog .detailsContents.-data .-l,
  dialog .detailsContents.-data .-r {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "img" "content";
  }
}
dialog .detailsContents.-services img {
  box-shadow: 0 0 var(--padding) rgba(0, 0, 0, 0.4);
  grid-area: img;
}
dialog .detailsContents.-services .-l {
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "img content";
}
dialog .detailsContents.-services .-r {
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "content img";
}
@media (max-width: 850px) {
  dialog .detailsContents.-services .-l,
  dialog .detailsContents.-services .-r {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  dialog .detailsContents.-services .-l,
  dialog .detailsContents.-services .-r {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "img" "content";
  }
}
dialog .detailsContents.-data {
  width: var(--content-mid);
  margin: auto;
}
dialog .detailsContents.-data .river {
  margin-block: calc(var(--padding) * 4);
  display: grid;
  gap: calc(var(--padding) * 3);
  transition: all 0.3s;
}
@media (max-width: 800px) {
  dialog .detailsContents.-data .river {
    gap: var(--padding);
  }
}
dialog .detailsContents.-data .img {
  grid-area: img;
}
dialog .detailsContents.-data img {
  max-width: 300px;
  width: calc(100% - 4rem);
}
dialog .detailsContents.-data .-l {
  grid-template-columns: 4fr 6fr;
  grid-template-areas: "img content";
}
dialog .detailsContents.-data .-r {
  grid-template-columns: 6fr 4fr;
  grid-template-areas: "content img";
}
@media (max-width: 600px) {
  dialog .detailsContents.-data img {
    width: 100%;
  }
  dialog .detailsContents.-data .-l {
    grid-template-columns: 1fr 6fr;
  }
  dialog .detailsContents.-data .-r {
    grid-template-columns: 6fr 1fr;
  }
}
@media (max-width: 500px) {
  dialog .detailsContents.-data .river {
    margin-block: var(--padding);
  }
  dialog .detailsContents.-data .img {
    width: 80px;
    margin-inline: auto;
  }
  dialog .detailsContents.-data .-l,
  dialog .detailsContents.-data .-r {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "img" "content";
  }
}
dialog .detailsContents.-internalDev {
  width: var(--content-width);
  margin-inline: auto;
}
dialog .detailsContents.-internalDev .internals {
  --bkg: var(--studs-surface);
  --color: var(--studs-on-surface);
  margin-block: calc(var(--padding) * 2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "buttonsl buttonsr" "content content";
  gap: 1rem;
}
dialog .detailsContents.-internalDev .internals input:checked + label {
  --bkg: var(--studs-primary);
  --color: var(--studs-on-primary);
}
dialog .detailsContents.-internalDev .internals input {
  grid-area: buttonsl;
  display: none;
}
dialog .detailsContents.-internalDev .internals label {
  background-color: var(--bkg);
  color: var(--color);
  padding: 0.5em 1.5em;
  border-radius: 2em;
  max-width: 20ch;
  text-align: center;
  justify-self: end;
  cursor: pointer;
  transition: all 0.3s;
  grid-area: buttonsl;
}
dialog .detailsContents.-internalDev .internals label[for=benefits] {
  grid-area: buttonsr;
  justify-self: start;
}
dialog .detailsContents.-internalDev .internals .radioContents {
  opacity: 0;
  grid-area: content;
  transition: opacity 1s;
}
dialog .detailsContents.-internalDev .internals .radioContents dt {
  font-size: clamp(1.1rem, 3vw, 1.875rem);
  font-weight: 700;
}
dialog .detailsContents.-internalDev .internals .radioContents dd {
  margin-inline: 0;
  margin-bottom: var(--padding);
}
dialog .detailsContents.-internalDev .internals input:checked + label + .radioContents {
  opacity: 1;
}
dialog .detailsContents h3 {
  max-width: var(--content-width);
  margin: 1rem auto;
  grid-column: 1/-1;
  grid-row: 1;
}
dialog .detailsContents .detailCards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
dialog .detailsContents .detailCards .img {
  background: var(--studs-surface);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--padding) / 2);
  aspect-ratio: 1/1;
}
dialog .detailsContents .detailCards .img img {
  height: 100%;
  width: auto;
}
dialog .detailsContents .detailCards p {
  margin: 0;
}
dialog footer.-banner {
  height: clamp(32px, 15vw, 240px);
  width: 105%;
  background-image: url("../../img/modal-footer.svg");
  background-size: 1400px;
  background-repeat: no-repeat;
  background-position: center center;
}

button {
  --button-border: transparent;
  --button-background: var(--studs-surface);
  --button-hover: var(--studs-surface-hover);
  --button-text: var(--studs-on-surface);
  padding: 1em;
  border: 2px solid var(--button-border);
  background: var(--button-background);
  cursor: pointer;
  color: var(--button-text);
}
button:hover {
  background: var(--button-hover);
  border-color: var(--button-border);
}
button.-cta {
  --button-background: var(--studs-primary);
  --button-hover: var(--studs-primary-hover);
  --button-text: var(--studs-on-primary);
}
button.-tertiary {
  --button-border: var(--studs-primary);
  --button-background: transparent;
  --button-hover: transparent;
  --button-text: var(--studs-primary);
}
button.-tertiary:hover {
  --button-border: var(--studs-primary-hover);
  --button-text: var(--studs-primary-hover);
}

::selection {
  background: var(--studs-primary);
  color: var(--studs-on-primary);
}

html {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-style: var(--font-style);
  color: var(--studs-on-app);
  background: var(--studs-app);
  scrollbar-width: thin;
  scrollbar-color: var(--studs-primary-hover) var(--studs-gray-70);
}
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: var(--studs-gray-70);
}
html::-webkit-scrollbar-thumb {
  background-color: var(--studs-primary-hover);
  border-radius: 5px;
  border: 0 solid var(--studs-primary-hover);
}

body {
  padding: 0;
  font: var(--font-body);
  overflow-x: hidden;
}

h1 {
  --fontFam: var(--font-family-extended);
  --font-size: clamp(1.25rem, 4vw, 3rem);
}

h2 {
  text-align: center;
  --font-size: clamp(1.15rem, 4vw, 2.5rem);
}

h3 {
  --font-weight: 600;
  --font-size: clamp(1.125rem, 4vw, 2rem);
  text-align: center;
}

h4 {
  margin: 0;
  --font-weight: 700;
  --font-size: clamp(1.1rem, 3vw, 1.875rem);
  line-height: 1em;
}

main {
  width: var(--content-width);
  margin-inline: auto;
}

:where(a, a:visited) {
  color: var(--studs-on-app);
  text-decoration: underline;
  text-decoration-color: var(--studs-primary);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

:where(a:hover) {
  color: var(--studs-primary-hover);
  text-decoration-color: var(--studs-primary-hover);
}

p {
  font-size: var(--font-size);
}

img {
  width: 100%;
}

/* utilities */
.-noScroll {
  height: 100vh;
  width: 100vw;
  overflow: clip;
}

body:has(.details[open]) {
  overflow: clip;
}

body {
  background-color: hsl(var(--h), var(--s), var(--l));
}
@media (max-width: 750px), (max-height: 750px) {
  body {
    background: var(--studs-app);
  }
}

em.siteName {
  font-style: normal;
}

section {
  background-color: var(--studs-app);
}
@media (max-width: 750px), (max-height: 750px) {
  section {
    overflow-x: clip;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

.logo {
  padding-left: var(--padding);
  padding-top: var(--padding);
}

@media (max-width: 750px), (max-height: 750px) {
  body > .logo {
    background: var(--studs-primary);
  }
}
#logo {
  width: 64px;
  opacity: 0.9;
}
#logo:hover {
  opacity: 1;
}
#logo img {
  width: 100%;
  max-width: 64px;
}

@keyframes headerFade {
  0% {
    opacity: 0.2;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
#splash {
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-template-rows: 250vh;
  grid-template-areas: "header graphic";
  width: min(100vw - 4rem, 1600px);
  margin-inline: auto;
  margin-bottom: max(100px, 20vh);
  background-color: transparent;
}
@media (max-width: 750px), (max-height: 750px) {
  #splash {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "header" "graphic";
    width: 100%;
    margin-bottom: 0;
    padding: 0;
  }
}
#splash .siteHeader {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  height: 200vh;
}
@media (max-width: 750px), (max-height: 750px) {
  #splash .siteHeader {
    grid-template-rows: min(100vh - 40px, 600px) auto;
    height: 100%;
  }
}
#splash .siteHeader h1, #splash .siteHeader h2 {
  color: var(--studs-on-primary);
  text-align: left;
}
#splash .siteHeader h1 span, #splash .siteHeader h2 span {
  display: none;
}
#splash .siteHeader h1 {
  align-self: center;
  opacity: 0.2;
  animation: headerFade linear both;
  animation-timeline: view(20%);
}
#splash .siteHeader h2 {
  align-self: start;
  opacity: 0.2;
  animation: headerFade linear both;
  animation-timeline: view(20%);
}
@media (max-width: 750px), (max-height: 750px) {
  #splash .siteHeader h1 {
    opacity: 1;
    animation: none;
    animation-timeline: none;
    background: var(--studs-primary);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 100%;
    padding-inline: 2rem;
    padding-bottom: 6rem;
  }
  #splash .siteHeader h2 {
    opacity: 1;
    animation: none;
    animation-timeline: none;
    color: var(--studs-on-app);
    width: 100%;
    padding-inline: 2rem;
    --font-size: clamp(1rem, 4vw, 1.25rem);
    --font-weight: 500;
  }
  #splash .siteHeader h2 span {
    display: block;
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
  }
}
#splash .splashWrapper {
  grid-area: graphic;
}
@media (max-width: 750px), (max-height: 750px) {
  #splash .splashWrapper {
    margin-left: 0;
    overflow-x: clip;
  }
}
#splash .splashBkg {
  display: none;
}
@media (max-width: 750px), (max-height: 750px) {
  #splash .splashBkg {
    display: flex;
    justify-content: center;
  }
}

.content {
  --font-size: 1.25rem;
  width: var(--content-width);
  margin-inline: auto;
  padding: 4rem 0;
  color: var(--studs-text-inverted);
}
@media (max-width: 750px), (max-height: 750px) {
  .content {
    --content-width: calc(100% - var(--padding));
    --content-wide: calc(100% - var(--padding));
  }
}
.content p {
  text-align: center;
}
.content.-wide {
  width: var(--content-wide);
}
.content.-inverse {
  color: var(--studs-on-app);
  --font-size: clamp(1.25rem, 3vw, 2rem);
}
.content.-hero {
  --img: url("../img/hero-a2-lrg.jpg");
  width: 100%;
  height: 100vh;
  margin: 0;
  position: relative;
  background-image: var(--img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1200px) {
  .content.-hero {
    --img: url("../img/hero-a2-med.jpg");
  }
}
@media (max-width: 700px) {
  .content.-hero {
    --img: url("../img/hero-a2-sm.jpg");
  }
}
.content.-hero[data-var=b] {
  --img: url("../img/hero-b2-lrg.jpg");
}
@media (max-width: 1200px) {
  .content.-hero[data-var=b] {
    --img: url("../img/hero-b2-med.jpg");
  }
}
@media (max-width: 700px) {
  .content.-hero[data-var=b] {
    --img: url("../img/hero-b2-sm.jpg");
  }
}
.content.-hero::after {
  content: "";
  width: 100vw;
  height: 100vh;
  background: var(--studs-primary);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  mix-blend-mode: overlay;
  opacity: 0.8;
  z-index: 2;
}
@media (prefers-contrast: more) {
  .content.-hero::after {
    mix-blend-mode: normal;
    opacity: 0.75;
  }
}
.content.-hero h2 {
  z-index: 3;
  --font-size: clamp(1.125rem, 6vw, 3rem);
}
.content.-missionStatement {
  font-size: clamp(1.125rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.35;
}
.content.-mailform {
  color: var(--studs-on-app);
  text-align: left;
}
.content.-mailform h3 {
  text-align: left;
}
.content.-mailform p {
  text-align: left;
  font-size: 1rem;
}
.content.-mailform em {
  font-style: normal;
  font-weight: 600;
}

.example {
  background: var(--studs-primary);
  /*
  removing example video for now,
  until a replacement video is made
      --Jp
  */
  display: none;
}

.-example {
  display: grid;
  grid-template-columns: 3fr 4fr;
  gap: 1rem;
  padding-block: 0;
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .-example {
    grid-template-columns: 1fr;
  }
}
.-example p {
  text-align: left;
}
.-example .video {
  background-color: var(--studs-orange-05);
  background-image: url("../img/platform-walkthrough.jpeg");
  background-size: contain;
  background-position: center center;
  position: relative;
}
.-example .video::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--studs-primary);
  opacity: 0.3;
  z-index: 1;
}
@media (max-width: 600px) {
  .-example .video {
    display: none;
  }
}
.-example .video .-play {
  --opacity: .8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  position: relative;
}
.-example .video .-play:hover {
  --opacity: 1;
}
.-example .video .-play svg {
  color: white;
  width: 120px;
  opacity: var(--opacity);
}
.-example .callout {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--studs-app);
  color: var(--studs-on-app);
}
.-example .callout button {
  width: auto;
  margin-right: auto;
  padding: 1em;
}

#videoBox {
  max-width: calc(100vw - 4rem);
  width: 100%;
  aspect-ratio: 1920/1080;
}
@media (max-height: 800px), (max-width: 800px) {
  #videoBox {
    max-width: 100%;
    height: max-content;
  }
}
@media (orientation: landscape) {
  #videoBox {
    width: auto;
  }
}

.highlight {
  background-color: #343434;
  background-size: 50px 50px;
  background-attachment: fixed;
  background-position: center;
  background-image: linear-gradient(to right, #3d3d3d 2px, transparent 2px), linear-gradient(to bottom, #3d3d3d 2px, transparent 2px);
  padding-bottom: 7rem;
}

.infographic {
  z-index: 1;
  position: sticky;
  top: 30vh;
  margin-right: 2rem;
}
@media (max-width: 750px), (max-height: 750px) {
  .infographic {
    position: static;
    margin-inline: 0;
    overflow: clip;
    width: 100vw;
    padding: 32px;
  }
}

.infographic-wrapper {
  margin-inline: 0;
  translate: 0;
  width: min(100vw - 4rem, 520px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
@media (min-width: 750px) and (min-height: 750px) {
  .infographic-wrapper {
    margin-inline: auto;
    width: 100%;
    scale: 1.4;
    display: grid;
    gap: 1rem;
    grid-template-columns: 128fr 104fr 156fr 665fr 156fr 104fr 128fr;
    grid-template-rows: 192fr 154fr 283fr 122fr 71fr;
    gap: 0;
    grid-template-areas: ". . . scaleability . . ." "efficiency efficiency efficiency . ecosystem ecosystem ecosystem" ". . . . . . ." ". retention . . . monetization ." ". . . . . . .";
  }
}

.infoCards {
  opacity: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.infoCards .title {
  color: var(--studs-on-app);
  z-index: 10;
  font-size: clamp(10px, 1.5vw, 14px);
  order: 2;
}
.infoCards .icon {
  border: 1px dashed var(--studs-primary);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  width: clamp(20px, 4vw, 56px);
  background-color: var(--studs-app);
  transition: background-color 0.3s;
  order: 1;
}
.infoCards .icon img {
  aspect-ratio: 1;
  width: max(100% - 1.5rem, 20px);
}
.infoCards .about {
  display: none;
}
@media (max-width: 750px), (max-height: 750px) {
  .infoCards {
    opacity: 1;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 20px rgba(56, 56, 56, 0.2);
    background: var(--studs-app);
    width: 100%;
    left: 0;
    grid-column: 1;
    grid-row: 1;
    scale: 0.85;
    transition: all 0.5s;
  }
  .infoCards.-current {
    scale: 1;
  }
  .infoCards.-next {
    left: 100%;
    box-shadow: none;
  }
  .infoCards.-offscreen {
    left: 200%;
    box-shadow: none;
  }
  .infoCards.-done {
    left: -100%;
    box-shadow: none;
  }
  .infoCards .title,
  .infoCards .icon {
    display: none;
  }
  .infoCards .about {
    scale: 1;
    display: flex;
  }
}

.aboutWrapper {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
  grid-template-areas: "icon title" "icon content";
}
@media (max-width: 450px) {
  .aboutWrapper {
    grid-template-areas: "icon title" "content content";
  }
}

.aboutIcon {
  grid-area: icon;
}

.aboutTitle {
  grid-area: title;
  font-weight: 600;
  font-size: 24px;
  align-self: center;
}

.aboutContent {
  grid-area: content;
  font-size: 20px;
}

@media (min-width: 750px) {
  #info-ecosystem {
    grid-area: ecosystem;
    justify-self: start;
    align-self: end;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #info-efficiency {
    grid-area: efficiency;
    justify-self: end;
    align-self: end;
    order: 2;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #info-efficiency .title {
    order: 1;
  }
  #info-monetization {
    grid-area: monetization;
    justify-self: end;
    align-self: center;
    margin-left: 0.5rem;
    flex-direction: column;
  }
  #info-monetization .title {
    position: absolute;
    bottom: -2rem;
  }
  #info-retention {
    grid-area: retention;
    justify-self: start;
    align-self: center;
    margin-right: 0.5rem;
    flex-direction: column;
  }
  #info-retention .title {
    position: absolute;
    bottom: -2rem;
  }
  #info-scaleability {
    grid-area: scaleability;
    justify-self: center;
    align-self: end;
    margin-bottom: 0.5rem;
    order: 2;
    flex-direction: column;
  }
  #info-scaleability .title {
    order: 1;
  }
}
#gableplate,
#infographic {
  grid-column: 3/6;
  grid-row: 2/5;
  pointer-events: none;
}
#gableplate img,
#infographic img {
  display: block;
}
@media (max-width: 750px), (max-height: 750px) {
  #gableplate,
  #infographic {
    display: none;
  }
}

#gableplate {
  opacity: 1;
  z-index: 2;
}
#gableplate img {
  filter: drop-shadow(0.6vw 0.6vw 1.2vw rgba(50, 50, 50, 0.8));
}

@keyframes iconScale {
  50% {
    scale: 1;
  }
  100% {
    scale: 0.8;
  }
}
[data-done=true] {
  /* animating icons */
}
[data-done=true] #gableplate img {
  filter: none;
}
[data-done=true] .infoCards .icon {
  animation: iconScale 0.5s ease-in-out alternate;
}
[data-done=true] .infoCards .icon:hover {
  background-color: var(--studs-base);
  border: 1px solid var(--studs-on-app);
}
[data-done=true] [data-card=retention] .icon {
  animation-delay: 0.3s;
}
[data-done=true] [data-card=efficiency] .icon {
  animation-delay: 0.5s;
}
[data-done=true] [data-card=scaleability] .icon {
  animation-delay: 0.7s;
}
[data-done=true] [data-card=ecosystem] .icon {
  animation-delay: 0.9s;
}
[data-done=true] [data-card=monetization] .icon {
  animation-delay: 1.1s;
}

#infographic {
  z-index: 1;
  opacity: 0;
}

.carousel {
  grid-area: text;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 1rem;
  overflow: clip;
  list-style: none;
  padding: 0;
}
.carouselWrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "text" "counters";
}
.carousel li {
  grid-column: 1;
  grid-row: 1;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.65em;
  --bkg: transparent;
  translate: 100%;
  transition: translate 0.5s;
}
.carousel li.-completed {
  translate: -100%;
  --bkg: transparent;
}
.carousel li.-current {
  translate: 0;
  --bkg: var(--studs-primary);
}
.carousel li em {
  position: relative;
  z-index: 1;
  font-style: inherit;
  padding-inline: 0.5em;
  padding-block: 0.25em;
}
.carousel li em::before {
  content: "";
  background-color: var(--bkg);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0.125em;
  border-radius: 0.25em;
  z-index: -1;
  transition: background-color 1s;
  transition-delay: 0.75s;
}

@keyframes counter {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.counters {
  grid-area: counters;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.counters span {
  display: inline-block;
  width: 1rem;
  height: 0.5rem;
  background: var(--studs-gray-70);
  border-radius: 1rem;
  transition: width 0.5s;
  cursor: pointer;
}
.counters span.-current {
  width: 3rem;
  position: relative;
  overflow: clip;
  background: var(--studs-gray-70);
}
.counters span.-current::after {
  content: "";
  width: 0%;
  height: 100%;
  background-color: var(--studs-primary);
  position: absolute;
  left: 0;
  top: 0;
  animation: counter 8s linear forwards;
}
.counters span.-current[data-animating=paused]::after {
  animation: none;
}
.counters span:hover {
  background: var(--studs-gray-40);
}

[data-fx=sizeup] {
  scale: 0.8;
  transition: 0.75s;
}
@media (min-width: 750px) and (min-height: 750px) {
  [data-fx=sizeup].-sized {
    scale: 1;
  }
}

@keyframes fadez {
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0.1;
  animation: fadez linear forwards;
}
@media (min-width: 750px), (min-height: 750px) {
  .fade-in {
    animation-timeline: view(69% 28%);
  }
}

footer {
  color: var(--studs-text-inverted);
  background: var(--studs-gray-80);
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}
footer .logo img {
  width: 64px;
}
footer p {
  border-top: 1px solid var(--studs-text-inverted);
  padding-top: var(--padding);
  margin: 0;
}

#popup {
  width: min(520px, 100vw - 2rem);
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 0 20px rgba(56, 56, 56, 0.2);
  background: var(--studs-app);
  position: fixed;
  z-index: 1000;
  display: flex;
  pointer-events: none;
}