@charset "UTF-8";


:root {
    --black: #232323;
    --yellow: #ffe9a3;
    --red: #ba010e;
    --grey: #f9f9f9;
    --drk-grey: #e0e0e0;
    --8: 0.5rem;
    --16: 1rem;
    --24: 1.5rem;
    --32: 2rem;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body > .wrapper {
  flex: 1; /* take all remaining vertical space */
  display: flex;
  flex-direction: column;
}

.bg-2 { background-color: var(--grey); }

html { font-size: 16px; }
body { font-family: "Open Sans", sans-serif; font-size: 1rem; font-weight: 400; font-style: normal; color: var(--black); }

.high-light { background: linear-gradient(transparent 65%, var(--yellow)0);}
.wrapper { margin-left: 5%; margin-right: 5%; max-width: 1440px; }
.article-wrapper { margin: auto; max-width: 750px;  }


/*== HEADING TAGS ==*/
h1, h2, h3 { font-weight: 700; }
h1 { font-size: var(--32); }
h2 { font-size: var(--24); margin-bottom: 0; margin-top: var(--24); }
h3 { font-size: 1.125rem; margin-top: .5rem; margin-bottom: 0; }

/*== LINKS ==*/
a { font-weight: 700; color: #4A6EE0; text-decoration: none; }
a:hover { text-decoration: underline; }
article a { color: var(--black); }
aside a { color: var(--black); }
.rd-more:after { content: url(assets/link_arrow.svg) }

p { line-height: 1.8rem; }
p.first-line { margin-top: 0; }
.p-line-h { line-height: 1.6rem; }
.p-no-pad p {padding: 0; margin: 0;}
article p:first-of-type { margin-top: 0; }

/*== NAVIGATION ==*/
nav { display: flex; align-items: center; justify-content: space-between; padding-left: var(--16); padding-right: var(--16); }
nav ul { display: flex; flex-direction: row; gap: 1rem; list-style: none; align-items: center; }
nav ul a { color: var(--black); font-weight: 400; }
.active { font-weight: 700; }

/*== LISTS ==*/
ul {display: flex; flex-direction: column; gap: var(--8); list-style: none; align-items: flex-start; padding-left: 0;}

ol { padding-left: 0; }
.grid-3 li { list-style: none; }
.grid-4 li { list-style: none; }
.grid-5 li { list-style: none; }

ol.num-list { list-style: none; counter-reset: section; padding-left: 0; }
ol.num-list li { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 1rem; counter-increment: section; margin-bottom: 2rem; }
ol.num-list > li::before { content: counter(section, decimal-leading-zero) "."; font-weight: bold; font-size: 1.5rem; line-height: 1.4; padding-top: 0.25rem; color: var(--black); }
.num-list h2 { margin-top: 0;}

ul.bullets { list-style: disc inside; }

ol.num-list li ul.bullets li {
  display: list-item;
  list-style: disc outside;
}

/*== CTAs ==*/
.cta-contact { background-color: var(--black); color: white; border-radius: 9999px; display: flex; gap: var(--24);
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 48px;
    font-weight: 400;
}

.cta-icon { height: var(--32); width: auto; flex-shrink: 0; display: block; }

.yt-cta {
    box-shadow: inset 0 0 0 2px var(--black);
    border-radius: 9999px;
    display: flex;
    gap: var(--24);
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 48px;
    color: var(--black);
    font-weight: 400;
}

.yt-cta:hover .cta-icon { content: url("assets/yt-icon-color.png"); }
.footer-cta { display: flex; flex-direction: column; gap: var(--24); }

/*== LAYOUT ==*/

/*SPACING*/
.space-above-sml { margin-top: var(--8); }
.space-above-ntrl { margin-top: var(--16); }
.space-above-mdm { margin-top: var(--24); }
.space-below-none { margin-bottom: 0; }
.space-below-sml {margin-bottom: var(--8);}
.space-below-mdm { margin-bottom: var(--24); }

.gappy { display: flex; gap: var(--24); flex-direction: column; }

figure { margin: 0; padding: 0;}

.intro-wrapper { display: flex; align-items: flex-start; flex-direction: column; }
section { padding-bottom: 2rem; }

/*CARDS*/
.cards { display: flex; flex-direction: column; gap: 2rem; }
.cards img { width: 100%; aspect-ratio: 16 / 9; }
.cards a { font-weight: 400; }
.cards article iframe { width: 100%; aspect-ratio: 16 /9; }

.sbs { display: flex; flex-direction: column; gap: 2rem; }
.art-port-half img { max-width: 100%; height: auto; display: block; }

/*BLOCK TEXT*/
.quote { font-style: italic; font-size: 1.5rem; font-weight: 700; line-height: 1.6; margin: 1.5rem auto; padding: 0.5rem; color: #222; background: #f9f9f9; border-left: 4px solid var(--red); }
.block { padding: 0 0.5rem; background: #f9f9f9; }
.block-outline { border: solid 2px var(--drk-grey); padding-top: 0.5rem; }
.noti { padding: var(--8); background: rgba(255, 233, 163, .5); font-weight: 700; line-height:1.5rem; }
.noti::after { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url('assets/happy-face.svg'); background-size: contain;  /* or cover */ background-repeat: no-repeat; }

.grid-5 li { padding: 0 0.5rem; background: var(--grey); border: solid 2px var(--drk-grey); }
.grid-3 li { padding: 0 0.5rem; background: var(--grey); border: solid 2px var(--drk-grey); }
.grid-3 p:first-of-type { margin-top: 0; }
.grid-4 li { padding: 0 0.5rem; background: var(--grey); border: solid 2px var(--drk-grey); }
.grid-4 p:first-of-type { margin-top: 0; }
.grid-5 p:first-of-type { margin-top: 0; }


footer { background: #f9f9f9; padding: var(--24) var(--16); }

/* Logo ticker */
.logo-ticker { overflow: hidden; width: 100%; background: transparent; margin: 32px 0; position: relative; }
.logo-ticker__track { display: flex; width: max-content; align-items: center; gap: 48px; }
.logo-ticker__logo { width: auto; display: block; }
.logo-ticker__track--mobile { display: flex; animation: ticker-scroll 10s linear infinite; }
.logo-ticker__track--desktop { display: none; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.logo-ticker:hover .logo-ticker__track--mobile { animation-play-state: paused; }

.pp { height: 80px; }
.ea { height: 48px; }


/*=== EYES & BADGES ===*/
.eyebrow { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--black); color: #fff; font-weight: 700; }
.eyes { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--black); color: #fff; line-height: 1; }
.badges {display: flex; gap: var(--8); flex-wrap: wrap; }
.badge { display: inline-block; background-color: var(--yellow); padding: 0.25rem 0.5rem; }


.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
.grid-5 { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
 


/*-- USE THESE FOR GRIDS
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
--*/

@media (max-width:600px) {
    .nav-cta { display: none; }
}

@media (min-width: 430px) {
    .wrapper { margin-left: 3.720930233%; margin-right:  3.720930233%; max-width: 1440px; }
}

@media (min-width: 600px) {
    .wrapper { margin-left: 4%; margin-right:  4%; max-width: 1440px; }
    .footer-cta { flex-direction: row; gap: var(--16); }
}

@media (min-width:800px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); justify-content: center; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); justify-content: center; }
    .grid-5 { grid-template-columns: repeat(3, 1fr); justify-content: center; }
    .cards { flex-direction: row; gap: 1rem; }
    .art-port-half {flex: 1; min-width: 0;}
    .art-item-3rd { flex: 0 0 33.333%; max-width: 33.333%; }
    .sbs { flex-direction: row; }
}

@media (min-width:1024px) {
    body {font-size: 1.125rem;}   
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    .wrapper { margin-left: 2.34375%; margin-right: 2.34375%; max-width: 1440px; }
    .intro-wrapper { flex-direction: row; gap: 2rem; }
    .cards { flex-wrap: wrap;}
    .item-1 { flex: 2; }
    .item-2 { flex: 1; }
    nav { padding-left: var(--24); padding-right: var(--24); }
    footer { padding: var(--24); }
    .art-item-half {flex: 2;}
    .art-item-qrt {flex: 1;}
    .grid-4 { grid-template-columns: repeat(4, 1fr); justify-content: center; }
    .grid-5 { grid-template-columns: repeat(5, 1fr); justify-content: center; }
    .logo-ticker__track { gap: 32px; }
    .logo-ticker__track--mobile { display: none !important; }
    .logo-ticker__track--desktop { display: flex !important; animation: none !important; transform: none !important; width: 100%; gap: 0 !important; justify-content: space-between; }
}

@media (min-width:1366px) {
    .wrapper { margin-left: 2.5%; margin-right: 2.5%; max-width: 1440px; }
}

@media (min-width:1500px) {
    .wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 2.34375%;
  padding-right: 2.34375%;
}
   /*-- .wrapper { margin-left: min(2.34375%, auto); margin-right: min(2.34375%, auto); max-width: 1920px; } */
    .logo-ticker__track { gap: 72px; }
}