/* WISC core design. Colour tokens are in :root; responsive overrides are at the end.
   Font definitions live in avenir-fonts.css. Keep this stylesheet before release additions. */

/* Layout or appearance for :root. */
:root {--ink:#302334;--cream:#fcf9f3;--coral:#ef775e;--plum:#332535;--muted:#746b73;--blue:#2459d4}
/* Layout or appearance for *. */
* {box-sizing:border-box}
/* Layout or appearance for html. */
html {scroll-behavior:smooth;scroll-padding-top:110px}
/* Layout or appearance for body. */
body {margin:0;background:var(--cream);color:var(--ink);font:17px/1.65 Avenir,sans-serif}
/* Layout or appearance for a. */
a {color:inherit;text-decoration:none}
/* Layout or appearance for button. */
button {font:inherit;cursor:pointer}
/* Layout or appearance for a:focus-visible,button:focus-visible,summary:focus-visible. */
a:focus-visible,button:focus-visible,summary:focus-visible {outline:3px solid #2459d4;outline-offset:5px}
/* Layout or appearance for header. */
header {position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:23px 5%;background:#fcf9f3f5;border-bottom:1px solid #ded8d1;backdrop-filter:blur(12px)}
/* Layout or appearance for .brand. */
.brand {display:flex;align-items:center;gap:17px;font-size:25px;font-weight:bold;line-height:1.15}
/* Layout or appearance for .brand img. */
.brand img {width:170px;height:auto;object-fit:contain}
/* Layout or appearance for .brand small. */
.brand small {font-size:10px;display:block;font-weight:400;margin-top:5px}
/* Layout or appearance for .pipe. */
.pipe {font-weight:400;color:#a29a9f}
/* Layout or appearance for nav. */
nav {display:flex;align-items:center;gap:27px;font-size:14px}
/* Layout or appearance for nav a:hover,.text-link:hover. */
nav a:hover,.text-link:hover {color:#bd3a5e}
/* Layout or appearance for .button. */
.button {display:inline-block;background:var(--blue);color:white;padding:15px 24px;border-radius:5px;font-size:15px;font-weight:700;transition:background .2s,transform .2s}
/* Layout or appearance for .button:hover. */
.button:hover {background:#e62282;color:white;transform:translateY(-2px)}
/* Layout or appearance for .button.small. */
.button.small {padding:11px 19px}
/* Layout or appearance for #menu. */
#menu {display:none}
/* Layout or appearance for .hero. */
.hero {padding:68px 5% 72px;display:grid;grid-template-columns:1.1fr 1fr;gap:5%;max-width:1600px;margin:auto}
/* Layout or appearance for .eyebrow. */
.eyebrow {font-size:12px;font-weight:700;letter-spacing:2px;margin:0 0 25px}
/* Layout or appearance for h1,h2,h3,p. */
h1,h2,h3,p {margin-top:0}
/* Layout or appearance for h1. */
h1 {font-size:clamp(58px,5.9vw,88px);line-height:1.04;letter-spacing:-4px;margin-bottom:30px;font-weight:700}
/* Layout or appearance for em. */
em {font-family:Georgia,serif;font-weight:400;color:#ac4c46}
/* Layout or appearance for h1 em. */
h1 em {font-size:.94em}
/* Layout or appearance for h2. */
h2 {font-size:clamp(38px,4vw,58px);line-height:1.12;letter-spacing:-2px;margin-bottom:28px}
/* Layout or appearance for h3. */
h3 {font-size:25px;line-height:1.25}
/* Layout or appearance for .lead. */
.lead {max-width:540px;color:var(--muted);font-size:18px}
/* Layout or appearance for .actions. */
.actions {display:flex;align-items:center;gap:25px;margin-top:31px}
/* Layout or appearance for .text-link. */
.text-link {font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:7px}
/* Layout or appearance for .hero-note. */
.hero-note {display:flex;gap:15px;align-items:center;font-size:12px;line-height:1.5;margin-top:36px}
/* Layout or appearance for .hero-note span. */
.hero-note span {font-size:35px;color:var(--coral)}
/* Layout or appearance for .hero-art. */
.hero-art {min-height:545px;position:relative;background:#efb6a1;border-radius:150px 150px 12px 12px;overflow:hidden;align-self:stretch;isolation:isolate}
/* Layout or appearance for .hero-art img. */
.hero-art img {position:absolute;width:100%;height:84%;object-fit:contain;bottom:12%;z-index:1}
/* Layout or appearance for .orbit. */
.orbit {position:absolute;border:1px solid #fff8;width:83%;height:82%;border-radius:50%;top:12%;left:8%}
/* Layout or appearance for .art-label. */
.art-label {position:absolute;top:38px;left:44px;font-size:11px;letter-spacing:2px;line-height:1.6;z-index:2}
/* Layout or appearance for .art-caption. */
.art-caption {position:absolute;bottom:0;background:var(--plum);color:var(--cream);padding:23px 30px;width:100%;display:flex;justify-content:space-between;align-items:center;z-index:3}
/* Layout or appearance for .art-caption span. */
.art-caption span {font-size:10px;letter-spacing:1.5px}
/* Layout or appearance for .art-caption strong. */
.art-caption strong {font-size:21px;line-height:1.2}
/* Layout or appearance for .spark. */
.spark {position:absolute;right:20px;top:40%;color:#fcf9f3;font-size:100px;z-index:2}
/* Layout or appearance for .ribbon. */
.ribbon {background:#ed795f;display:flex;justify-content:space-around;align-items:center;padding:20px 4%;font-size:11px;letter-spacing:1.5px;font-weight:700;gap:20px}
/* Layout or appearance for .ribbon b. */
.ribbon b {font-size:25px}
/* Layout or appearance for .section. */
.section {padding:95px 7%}
/* Layout or appearance for .split. */
.split {display:grid;grid-template-columns:1fr 1fr;gap:10%}
/* Layout or appearance for .split p. */
.split p {color:var(--muted)}
/* Layout or appearance for .split .large. */
.split .large {font-size:24px;color:var(--ink);line-height:1.4}
/* Layout or appearance for .dark. */
.dark {background:var(--plum);color:var(--cream)}
/* Layout or appearance for .dark em. */
.dark em {color:#f2ac94}
/* Layout or appearance for .section-heading. */
.section-heading {display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
/* Layout or appearance for .section-heading h2. */
.section-heading h2 {margin-bottom:0}
/* Layout or appearance for .section-heading>p. */
.section-heading>p {font-size:15px;max-width:330px;color:var(--muted)}
/* Layout or appearance for .dark .section-heading>p. */
.dark .section-heading>p {color:#cec4cd}
/* Layout or appearance for .cards. */
.cards {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Layout or appearance for .cards article. */
.cards article {padding:32px;border:1px solid #736071;border-radius:8px}
/* Layout or appearance for .cards article:nth-child(2). */
.cards article:nth-child(2) {background:#493647}
/* Layout or appearance for .card-number. */
.card-number {display:block;font-size:13px;color:#f2ac94;margin-bottom:34px}
/* Layout or appearance for .cards h3. */
.cards h3 {font-size:30px}
/* Layout or appearance for .cards p. */
.cards p {font-size:15px;color:#d1c6d0}
/* Layout or appearance for .cards a. */
.cards a {font-size:13px;color:#f5b59f}
/* Layout or appearance for .support-grid. */
.support-grid {display:grid;grid-template-columns:1fr 1fr;gap:12%}
/* Layout or appearance for .support-grid>div>p:not(.eyebrow). */
.support-grid>div>p:not(.eyebrow) {color:var(--muted)}
/* Layout or appearance for .support-list article. */
.support-list article {display:flex;gap:26px;border-bottom:1px solid #dcd4ce;padding:24px 0}
/* Layout or appearance for .support-list article:first-child. */
.support-list article:first-child {padding-top:0}
/* Layout or appearance for .support-list h3. */
.support-list h3 {margin-bottom:9px}
/* Layout or appearance for .support-list p. */
.support-list p {margin:0;color:var(--muted);font-size:15px}
/* Layout or appearance for .support-list article>span. */
.support-list article>span {font-size:35px;color:#ac4c46}
/* Layout or appearance for .careers. */
.careers {background:#f0ece5}
/* Layout or appearance for .filters. */
.filters {display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
/* Layout or appearance for .filters button. */
.filters button {border:1px solid #cfc5cb;padding:9px 19px;border-radius:30px;background:transparent;font-size:14px;color:var(--ink)}
/* Layout or appearance for .filters .active. */
.filters .active {background:var(--plum);color:white;border-color:var(--plum)}
/* Layout or appearance for .career-grid. */
.career-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* Layout or appearance for .career-grid article. */
.career-grid article {background:var(--cream);padding:27px 23px;border-radius:6px}
/* Layout or appearance for .career-grid article[hidden]. */
.career-grid article[hidden] {display:none}
/* Layout or appearance for .career-grid span. */
.career-grid span {font-size:10px;letter-spacing:1.2px;color:#aa4b45;display:block;margin-bottom:28px}
/* Layout or appearance for .career-grid h3. */
.career-grid h3 {font-size:23px}
/* Layout or appearance for .career-grid p. */
.career-grid p {font-size:15px;color:var(--muted)}
/* Layout or appearance for .career-grid small. */
.career-grid small {font-size:12px;display:block;border-top:1px solid #ddd4cf;padding-top:16px}
/* Layout or appearance for .footnote. */
.footnote {font-size:12px;margin-top:24px;color:var(--muted)}
/* Layout or appearance for .join. */
.join {background:#e6ebdf;display:grid;grid-template-columns:1.4fr 1fr;gap:12%;align-items:center}
/* Layout or appearance for .join p. */
.join p {max-width:590px}
/* Layout or appearance for .join aside. */
.join aside {border-left:1px solid #b8c3ad;padding-left:40px}
/* Layout or appearance for .big-star. */
.big-star {font-size:80px;color:#6e805d;line-height:1.1;display:block;margin-bottom:25px}
/* Layout or appearance for ol. */
ol {padding-left:20px;font-size:15px}
/* Layout or appearance for li. */
li {padding:9px 0}
/* Layout or appearance for .involve-grid. */
.involve-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
/* Layout or appearance for .involve-grid article. */
.involve-grid article {border-top:2px solid var(--coral);padding-top:26px}
/* Layout or appearance for .involve-grid p. */
.involve-grid p {font-size:15px;color:var(--muted)}
/* Layout or appearance for .involve-grid a. */
.involve-grid a {font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
/* Layout or appearance for .faq. */
.faq {background:#f0ece5}
/* Layout or appearance for .faq h2. */
.faq h2 {margin-bottom:45px}
/* Layout or appearance for details. */
details {border-top:1px solid #cec6c4;padding:20px 0}
/* Layout or appearance for summary. */
summary {cursor:pointer;font-weight:700;font-size:18px}
/* Layout or appearance for details p. */
details p {max-width:850px;margin:15px 0 5px;color:var(--muted);font-size:16px}
/* Layout or appearance for .closing. */
.closing {text-align:center;background:var(--plum);color:white;padding:80px 5%}
/* Layout or appearance for .closing em. */
.closing em {color:#f3ac94}
/* Layout or appearance for footer. */
footer {padding:50px 5% 25px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:25px}
/* Layout or appearance for footer p,footer a:not(.brand). */
footer p,footer a:not(.brand) {font-size:12px;color:var(--muted)}
/* Layout or appearance for footer>div. */
footer>div {display:flex;flex-direction:column;gap:9px}
/* Layout or appearance for footer>small. */
footer>small {grid-column:1/-1;border-top:1px solid #ddd4cf;padding-top:25px;font-size:11px}
/* Layout or appearance for .skip. */
.skip {position:absolute;left:15px;top:-100px;z-index:100;background:white;padding:12px}
/* Layout or appearance for .skip:focus. */
.skip:focus {top:10px}
/* Layout or appearance for @media(min-width:1600px). */
@media(min-width:1600px) {
/* Layout or appearance for .section. */
.section {padding-left:max(7%,calc((100vw - 1350px)/2));padding-right:max(7%,calc((100vw - 1350px)/2))}}
/* Layout or appearance for @media(max-width:1000px). */
@media(max-width:1000px) {
/* Layout or appearance for nav. */
nav {gap:15px;font-size:12px}
/* Layout or appearance for .brand. */
.brand {gap:10px}
/* Layout or appearance for .brand img. */
.brand img {width:clamp(84px, 24vw, 148px)}
/* Layout or appearance for .hero. */
.hero {gap:30px}
/* Layout or appearance for h1. */
h1 {font-size:62px}
/* Layout or appearance for .hero-art. */
.hero-art {min-height:510px}
/* Layout or appearance for .actions. */
.actions {align-items:start;flex-direction:column;gap:18px}
/* Layout or appearance for .career-grid. */
.career-grid {grid-template-columns:1fr 1fr}
/* Layout or appearance for .section. */
.section {padding:70px 5%}
/* Layout or appearance for .cards article. */
.cards article {padding:24px}
/* Layout or appearance for .cards h3. */
.cards h3 {font-size:26px}}
/* Layout or appearance for @media(max-width:760px). */
@media(max-width:760px) {
/* Layout or appearance for header. */
header {padding:16px 5%}
/* Layout or appearance for #menu. */
#menu {display:block;background:none;border:1px solid #c9c0c5;border-radius:5px;padding:6px 10px;font-size:13px}
/* Layout or appearance for nav. */
nav {display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);padding:24px 5%;border-bottom:1px solid #ccc}
/* Layout or appearance for nav.open. */
nav.open {display:flex;flex-direction:column;align-items:stretch;gap:18px;font-size:16px}
/* Layout or appearance for .hero. */
.hero {grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}
/* Layout or appearance for h1. */
h1 {font-size:61px;letter-spacing:-3px}
/* Layout or appearance for .hero-art. */
.hero-art {min-height:470px;margin-top:12px;border-radius:120px 120px 8px 8px}
/* Layout or appearance for .hero-copy .eyebrow. */
.hero-copy .eyebrow {font-size:10px}
/* Layout or appearance for .actions. */
.actions {flex-direction:row;align-items:center;gap:15px}
/* Layout or appearance for .actions .text-link. */
.actions .text-link {font-size:12px}
/* Layout or appearance for .ribbon. */
.ribbon {flex-wrap:wrap;justify-content:center;font-size:9px;gap:10px}
/* Layout or appearance for .ribbon b. */
.ribbon b {font-size:18px}
/* Layout or appearance for .ribbon span:last-child,.ribbon b:last-of-type. */
.ribbon span:last-child,.ribbon b:last-of-type {display:none}
/* Layout or appearance for .split,.support-grid,.join. */
.split,.support-grid,.join {grid-template-columns:1fr;gap:35px}
/* Layout or appearance for .section-heading. */
.section-heading {display:block}
/* Layout or appearance for .section-heading>p. */
.section-heading>p {margin-top:24px}
/* Layout or appearance for .cards,.involve-grid. */
.cards,.involve-grid {grid-template-columns:1fr}
/* Layout or appearance for .cards h3 br. */
.cards h3 br {display:none}
/* Layout or appearance for .card-number. */
.card-number {margin-bottom:20px}
/* Layout or appearance for .section. */
.section {padding:55px 6%}
/* Layout or appearance for h2. */
h2 {font-size:42px}
/* Layout or appearance for .career-grid. */
.career-grid {grid-template-columns:1fr}
/* Layout or appearance for .join aside. */
.join aside {border-left:0;border-top:1px solid #b8c3ad;padding:28px 0 0}
/* Layout or appearance for .big-star. */
.big-star {font-size:55px}
/* Layout or appearance for .closing. */
.closing {padding:60px 6%}
/* Layout or appearance for footer. */
footer {grid-template-columns:1fr;gap:22px}
/* Layout or appearance for .brand small. */
.brand small {font-size:9px}
/* Layout or appearance for .hero-note. */
.hero-note {margin-top:25px}}
/* Layout or appearance for @media(prefers-reduced-motion:reduce). */
@media(prefers-reduced-motion:reduce) {
/* Layout or appearance for html. */
html {scroll-behavior:auto}
/* Layout or appearance for *. */
* {transition:none!important}}