@charset "UTF-8";

@import "./color-library.css";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


/*  GLOBAL TOKENS
--------------------------------*/

:root {
  overflow: scroll;
  scroll-behavior: smooth;
  /*
  FONT-SIZE =========================== */
  --base-scale: 125%; /* 1rem = 20px on Normal zoom */
  font-size: var(--base-scale);

  --font-size-xx-small: 0.675rem;
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-x-large: 1.5rem;
  --font-size-xx-large: 2.25rem;
  --font-size-xxx-large: 3rem;
  --font-size-xxxx-large: 4.5rem;
  
  --font-size-heading-1: 2.375rem;
  --font-size-heading-2: 1.75rem;
  --font-size-heading-3: 1.5rem;
  --font-size-heading-4: 1.25rem;
  --font-size-heading-5: 1.175rem;
  --font-size-heading-6: 1.1rem;

  /*
  FONTS ===========================
    All fonts are open license available on Google Fonts. */
    
    /* SERIF | Newsreader https://fonts.google.com/specimen/Newsreader */
    --font-serif: 'Newsreader';
    --font-fallback-serif: Constantia, 'Lucida Bright', 'Lucida Serif', Lucida, 'DejaVu Serif', 'Liberation Serif', Georgia;
    --font-stack-serif: var(--font-serif, var(--font-fallback-serif, serif));

    /* SANS | Montserrat https://fonts.google.com/specimen/Montserrat */
    --font-sans: 'Montserrat';
    --font-fallback-sans: -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Segoe UI', 'Helvetica Neue', Ubuntu, Roboto, Arial;
    --font-stack-sans: var(--font-sans, var(--font-fallback-sans, sans-serif));
  
    /* MONO | IBM Plex Mono https://fonts.google.com/specimen/IBM+Plex+Mono */
    --font-mono: 'IBM Plex Mono';
    --font-fallback-mono: Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console';
    --font-stack-mono: var(--font-mono, var(--font-fallback-mono, monospace));

    /* Font settings */
    --text-font: var(--font-stack-sans);
    --text-weight: 500;
    --text-leading: 1.4;
    --text-tracking: -0.025em;
    --text-tracking-tight: -0.03em;
    --heading-font: var(--font-stack-sans);
    --heading-leading: 1.15;
    --heading-tracking: -0.03em;
    --mono-font: var(--font-stack-mono);

    /* Font declarations */
    font-family: var(--text-font);
    font-weight: var(--text-weight);
    line-height: var(--text-leading);
    letter-spacing: var(--text-tracking);
    
  /*
  COLORS =========================== */
    /* Brand colors */
    --brand-onyx: #323844;
    --brand-blue: #3d7ca4;
    --brand-gold: #ecc63f;
    --brand-onyx-alt: #262a33;
    --brand-blue-alt: #4385a8;
    --brand-gold-alt: #f6c204;
    --wistia-blue: #2c5976;
    --piims-blue: #90b7c1;
    
    /* Shadows */
    --shadow-default: 0 2px 6px 0 rgb(0 41 77 / 7%);
    
    --shadow-soft: 0.25em 0.375em 1.25em rgb(0 0 0 / 30%);
    --shadow-lighter: 0 1px 3px rgb(0 0 0 / 10%);
    --shadow-light: 0 2px 4px rgb(0 0 0 / 14%);
    --shadow-medium: 0 2px 7px rgb(0 0 0 / 16%);
    --shadow-dark: 0 2px 10px rgb(0 0 0 / 20%);

    --shadow-tooltip: 0 2px 10px 0 rgb(0 18 32 / 8%);
    --shadow-hover: 0 2px 10px 0 rgb(0 18 32 / 13%);
    --shadow-modal: 0 2px 20px 0 rgb(0 0 0 / 20%);
    --shadow-card:
      0 2px 6px 0 rgb(0 41 77 / 7%),
      0 -1px 0 0 rgb(0 0 0 / 9%),
      -1px 0 0 0 rgb(0 0 0 / 7%),
      1px 0 0 0 rgb(0 0 0 / 7%),
      0 1px 0 0 rgb(0 0 0 / 7%);
    --shadow-text: 0 2px 8px var(--blackest);

    /* Gradients */
    --grad-dark-gray: linear-gradient(90deg, #90929A 0%, #4A4A4F 100%);
    --grad-dark-blue: linear-gradient(90deg, #00679D 0%, #2D3160 100%);
    --grad-dark-green: linear-gradient(90deg, #007A00 0%, #004338 100%);
    --grad-dark-red: linear-gradient(90deg, #984436 0%, #670034 100%);
    --grad-dark-yellow: linear-gradient(90deg, #D89F00 0%, #996D49 100%);
    --grad-light-gray: linear-gradient(90deg, #DCDDE4 0%, #A7A9B1 100%);
    --grad-light-blue: linear-gradient(90deg, #D1E0EC 0%, #BFC2D6 100%);
    --grad-light-green: linear-gradient(90deg, #E5F1E6 0%, #CEE3DE 100%);
    --grad-light-red: linear-gradient(90deg, #FFE1D9 0%, #FFCDDC 100%);
    --grad-light-yellow: linear-gradient(90deg, #FFFBD9 0%, #FFE1B5 100%);

    /* Aurorae */
    --aurora-dark-emerald: linear-gradient(90deg, #2D4F67 28.65%, #009C7B 100%);
    --aurora-dark-violet: linear-gradient(90deg, #2D4F67 30.73%, #864FE8 100%);
    --aurora-dark-magenta: linear-gradient(90deg, #2D4F67 31.25%, #B537B8 100%);
    --aurora-light-emerald: linear-gradient(90deg, #BBF5FF 31.77%, #8ED4C5 100%);
    --aurora-light-violet: linear-gradient(90deg, #BBF5FF 19.27%, #C7BBEF 100%);
    --aurora-light-magenta: linear-gradient(90deg, #BBF5FF 8.33%, #DEB3DD 100%);

    /* Foreground & background */
    --canvas-black: var(--pal-black);
    --canvas-dark: var(--gray-90);
    --canvas-mid-dark: var(--gray-70);
    --canvas-mid-light: var(--gray-30);
    --canvas-light: var(--gray-10);
    --canvas-white: var(--pal-base);
    --material-black: var(--gray-99);
    --material-dark: var(--gray-80);
    --material-mid-dark: var(--gray-60);
    --material-mid-light: var(--gray-40);
    --material-light: var(--gray-20);
    --material-white: var(--gray-05);

    --page-bg: var(--gray-00);
    --text-ink: var(--black);
    
    /* Inline styles */
    --link-normal: var(--b50b);--link-hover: var(--c30v);
    --code-dark: var(--gray-70);--code-light: var(--y10v);
    --del-dark: var(--r60);--del-light: var(--r05);
    --ins-dark: var(--g60);--ins-light: var(--g05);
    --mark-dark: var(--r95);--mark-light: var(--y10v);
    --samp-dark: var(--i90d);--samp-light: var(--i10d);
    --kbd-bg: var(--gray-10);--kbd-border: var(--gray-20);

  /*
  SPACING =========================== */
  /* Spacing constants */
  --space-hair: 0.125rem;
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.25rem;
  --space-xl: 2rem; 
  
  --corners-sharp: 0;
  --corners-dull: 0.25rem;
  --corners-default: 0.375rem;
  --corners-round: 0.5rem;
  --corners-circle: 50%;

  /* Containers */
  --container-large: min(100%, 1200px);
  --container-medium: min(100%, 1064px);
  --container-small: min(100%, 800px);


  /* Spacing settings */
  --field__y-gutter: var(--space-xxs);
  --field-group__x-gap: var(--space-l);
  --field-group__y-gap: var(--space-m);
  --textbox__x-padding: var(--space-s);
  --textbox__y-padding: var(--space-xs);
  --card__padding-small: var(--space-m);
  --card__padding-large: var(--space-l);
  --paragraph__before: var(--space-xxs);
  --paragraph__after: var(--space-m);
  --section__x-padding: var(--space-l);
  --section__y-padding: var(--space-s);
  
  /*
  ANIMATION =========================== */
  --animate-hover-on: 0s 0s linear;
  --animate-hover-off: 125ms 20ms ease-in;
}


/*  TAGS & ATTRIBUTES
--------------------------------*/
body {
  text-align: left;
  list-style-type: disc;
  box-sizing: border-box;
  margin: 0;
  font-style: normal;
  background-color: var(--page-bg);
  color: var(--text-ink);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

p {
  margin:
    var(--paragraph__before)
    0
    var(--paragraph__after);
}

strong, b, dfn {
  font-weight: 700;
  letter-spacing: var(--text-tracking-tight);
}
dfn {
  font-style: normal;
  color: var(--blacker);
}

:link,
:visited {
  color: var(--link-normal);
  text-decoration: none;
  font-style: normal;
  font-weight: 600;
  transition: var(--animate-hover-off);
  transition-property: color;
}
a:hover {
  transition: var(--animate-hover-on);
  color: var(--link-hover);
  text-decoration: underline;
}

figure {
  margin: 0;
  padding: 0;
  line-height: 1;
}

menu {
  margin: 0;
  padding: 0;
}

kbd, code, samp, pre {
  font-family: var(--mono-font);
  font-size: inherit;
  letter-spacing: var(--text-tracking-tight);
}
kbd, pre {
  font-size: var(--font-size-small);
  line-height: 1.025;
}
code, samp {
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1;
  margin-inline: 0.05em;
  padding: 0.1em 0.25em;
  border-radius: var(--corners-dull);
  position: relative;
  bottom: 0.075em;
}

kbd {
  background-color: var(--kbd-bg);
  color: var(--blacker);
  border: 2px solid var(--kbd-border);
  margin-inline: 0.05em;
  padding-inline: 0.2em;
  border-radius: var(--corners-default);
}
code {
  background-color: var(--code-dark);
  color: var(--code-light);
}
samp {
  background-color: var(--samp-light);
  color: var(--samp-dark);
}
mark {
  background-color: var(--mark-light);
  color: var(--mark-dark);
  padding-inline: 0.1em;
  font-weight: 500;
  letter-spacing: var(--text-tracking-tight);
}

del {
  background-color: var(--del-light);
  color: var(--del-dark);
}
ins {
  background-color: var(--ins-light);
  color: var(--ins-dark);
}

small, sup {
  font-size: var(--font-size-x-small);
}
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sup {
  top: -.5em;
}
sub {
  font-size: var(--font-size-xx-small);  
  bottom: -.25em;
}


/*  HEADINGS
--------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  margin: 0;
  padding: 0;
  color: var(--blacker);
}

/* Jumbo for hero */
.hed-0 {
  color: var(--blackest);
  margin: 0.5em 0 0;
  padding: 0.375em 0;
  font-size: var(--font-size-xxx-large);
  line-height: calc(var(--heading-leading) - 0.2);
  font-weight: 700;
  letter-spacing: calc(var(--heading-tracking) - 0.025em);
}

.hed-1,
h1:not([class]) {
  color: var(--black);
  margin: 0.5em 0 0.375em;
  padding: 0.375em 0;
  font-size: var(--font-size-heading-1);
  line-height: calc(var(--heading-leading) - 0.2);
  font-weight: 500;
  letter-spacing: calc(var(--heading-tracking) - 0.02em);
}
.hed-2,
h2:not([class]) {
  margin: 0.5em 0 0;
  padding: 0.375em 0;
  font-size: var(--font-size-heading-2);
  line-height: calc(var(--heading-leading) - 0.1);
  font-weight: 700;
  letter-spacing: calc(var(--heading-tracking) - 0.015em);
}
.hed-3,
h3:not([class]) {
  margin: 0;
  padding: 0.5em 0;
  font-size: var(--font-size-heading-3);
  line-height: calc(var(--heading-leading) + 0.05);
  font-weight: 700;
  letter-spacing: calc(var(--heading-tracking) - 0.01em);
}
.hed-4,
h4:not([class]) {
  margin: 0;
  padding: 0.5em 0 0.375em;
  font-size: var(--font-size-heading-4);
  line-height: calc(var(--heading-leading) + 0.05);
  font-weight: 700;
}
.hed-5,
h5:not([class]) {
  margin: 0;
  padding: 0.625em 0;
  font-size: var(--font-size-heading-5);
  line-height: calc(var(--heading-leading) + 0.1);
  font-weight: 800;
}
.hed-6,
h6:not([class]) {
  margin: 0;
  padding: 0.625em 0 0.5em;
  font-size: var(--font-size-heading-6);
  line-height: calc(var(--heading-leading) + 0.15);
  font-weight: 800;
}


/*  SUB-HEADINGS & HGROUPS
--------------------------------*/
.eyebrow {
  margin-bottom: 0;
  color: var(--b60d);
  font-weight: 600;
  text-transform: uppercase;
}

.eyebrow + .hed-1,
.eyebrow + h1:not([class]),
.eyebrow + .hed-2,
.eyebrow + h2:not([class]) {
  margin-top: 0;
  padding-top: 0.125em;
}

.hed-0 + .dek {
  color: var(--blacker);
  font-size: var(--font-size-x-large);
  line-height: calc(var(--heading-leading) - 0.05);
  font-weight: 600;
  letter-spacing: calc(var(--heading-tracking) - 0.01em);
  margin-bottom: var(--space-l);
}



/*  UTILITIES
--------------------------------*/

.container {
  width: var(--container-medium);
  margin: 0 auto;
}
.container.narrow {width: var(--container-small);}
.container.wide {width: var(--container-large);}

section .container,
article .container,
.page__header .container,
.page__footer .container {
  padding: var(--section__y-padding) var(--section__x-padding);
}
.site__header .container,
.site__footer .container {
  padding: 0 var(--section__x-padding);
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.row.reverse {
  flex-direction: row-reverse;
}

.col-sticky {
  position: sticky;
  /*top: calc(var(--font-size-xxx-large) + 0.75rem);*/
  top: 8rem;
}

/* Flex child will grow and push siblings
  outward, e.g. logo and menu in header */
.expander {
  flex-grow: 1;
  border: none;
}

/* Use fixed-height div for vertical space
  without having to change parent padding */
.breaker {
  height: calc(var(--font-size-xxx-large) + 0.25rem);
}

.nobr {
  white-space: nowrap;
}

/* Hidden because not ready or to be determined */
.not-mvp {
  display: none !important;
}

/* Visible to screen-readers, hidden on screen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}


/*  SECTIONS
--------------------------------*/

main > section,
main > article {
  padding: 1em 0;
}

section.bg-alternate,
article.bg-alternate {
  background-color: var(--warm-05);
}


/*  BUTTONS
--------------------------------*/

.button {
  display: inline-block;
}
:where(
  button,
  .button,
  input[type=button],
  input[type=submit],
  input[type=reset]
) {
  --button__color-dark: var(--gray-80);
  --button__color-light: var(--gray-10);
  --button__color-white: var(--whiter);
  --button__color-hover: var(--y40v);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--text-tracking-tight);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--corners-round);
  border-style: solid;
  border-width: var(--space-hair);
  transition: var(--animate-hover-off);
  transition-property: background-color, border-color;
  cursor: pointer;
  box-shadow: none;
}

.brand {
  --button__color-dark: var(--b60);
  --button__color-light: var(--b10d);
  --button__color-white: var(--b00);
  --button__color-hover: var(--b40b);
}
.positive {
  --button__color-dark: var(--g60);
  --button__color-light: var(--g10d);
  --button__color-white: var(--g00);
  --button__color-hover: var(--g40b);
}
.negative {
  --button__color-dark: var(--r60);
  --button__color-light: var(--r10d);
  --button__color-white: var(--r00);
  --button__color-hover: var(--r40b);
}

.primary {
  color: var(--button__color-white);
  background-color: var(--button__color-dark);
  border-color: var(--button__color-dark);
}
.secondary {
  color: var(--button__color-dark);
  background-color: var(--button__color-light);
  border-color: var(--button__color-light);
}
.tertiary {
  color: var(--button__color-dark);
  background-color: transparent;
  border-color: var(--button__color-dark);
}
.other {
  color: var(--button__color-dark);
  background-color: transparent;
  border-color: transparent;
}

button:hover,
.button:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  transition: var(--animate-hover-on);
  box-shadow: var(--shadow-hover);
  color: var(--button__color-white);
  background-color: var(--button__color-hover);
  border-color: var(--button__color-hover);
}

button * + *,
.button * + *,
input[type=button] * + *,
input[type=submit] * + *,
input[type=reset] * + * {
  margin-inline-start: var(--space-xxs);
}

.button-group {
  margin-block: var(--field-group__y-gap);
}

.button-group button + button {
  margin-inline-start: var(--space-xs);
}

.button-plus-text {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-s);
}


/*  HEADER
--------------------------------*/

header menu {
  list-style: none;
}

.site__header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--brand-onyx-alt);
}

.header__logo {
  transition: var(--animate-hover-off);
  transition-property: filter, background-color;
  padding: 0.25em 0;
}
.header__logo img:hover {
  transition: var(--animate-hover-on);
  background: rgb(60 101 131 / 50%);
}

.header__link-group {
  display: flex;
  align-items: center;
}

.header__menu > li {
  display: inline-block;
}
.header__menu > li:not(:first-child) {
  margin-left: 1em;
}
.header__menu > li > a {
  color: var(--brand-gold);
  line-height: 1;
}
.header__menu > li > a:hover {
  color: var(--brand-gold-alt);
}

.header__dropdown {
  position: absolute;
  z-index: 110;
  padding: 0.75em;
  background-color: var(--gray-00);
  border-radius: 0.5em;  
  box-shadow: var(--shadow-modal);
  transition: var(--animate-hover-off);
  transition-property: opacity;
  opacity: 0;
  pointer-events: none;
}
.header__menu > li:hover > .header__dropdown {
  transition: var(--animate-hover-on);
  opacity: 1;
  pointer-events: auto;
}

.page__header {
  background: var(--aurora-light-emerald);
}
.page__header .container {
  width: var(--container-medium);
}

.skip {
  position: absolute;
  top: 4rem;
  left: -9999px;
  vertical-align: bottom;
  z-index: 200;
  padding: 2px 8px;
  border-radius: 8px;
  background-color: rgb(0 0 0 / 80%);
}
.skip:focus {
  left: 1rem;
  color: var(--link-hover);
}


/*  FOOTER
--------------------------------*/

footer menu {
  list-style: none;
}

.footer__menu {
  background:
    linear-gradient(
      to right,
      var(--brand-onyx-alt),
      50%,
      rgb(0 0 0 / 0%)
    ),
    url(../imgs/ai02.png),
    var(--brand-onyx-alt);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: 125%;
  padding: 0.5em 0 1em;
}
.footer__column > h3 {
  color: var(--b40d);
}

.footer__fineprint {
  font-size: var(--font-size-small);
  background-color: var(--b60d);
  line-height: calc(var(--text-leading) - 0.15);
  padding: 0.75em 0;
}
.footer__marks,
.footer__address {
  color: var(--b20d);
}
.footer__marks {
  text-align: right;
}

.site__footer a {
  color: var(--whiter);
}
.site__footer a:hover {
  color: var(--brand-gold);
}

.terms__menu li {
  margin-left: 0.5em;
}

@media screen and (max-width: 767px) {
  .footer__fineprint .row {
    display: revert;
  }

  .footer__marks,
  .footer__address {
    text-align: center;
    margin-bottom: 0.5em;
  }
  .footer__address address,
  .footer__marks {
    font-size: .875em;
  }
  .footer__address a {
    font-size: 1.25em;
    display: inline-block;
    margin-bottom: 0.125em;
  }
  .footer__address br {
    display: none;
  }
}


/*  REGIONS
--------------------------------*/

/* Hero images by page */
#pageHome {
  --i_hero-image: url('../imgs/ai06.png');
  --i_hero-screen: radial-gradient(
    circle at 80% 55%,
    var(--cool-00),
    60%,
    rgb(255 255 255 / 0%)
  );
  --i_hero-blend: screen;
}
#pageAbout {
  --i_hero-image: url('../imgs/store_header_bg.jpg');
  --i_hero-screen: var(--aurora-dark-magenta);
  --i_hero-blend: soft-light;
}
#pageIllustrations {
  --i_hero-image: url('../imgs/ai01.png');
  --i_hero-screen: var(--aurora-dark-emerald);
  --i_hero-blend: darken;
}

.hero {
  background-image:
    var(--i_hero-screen),
    var(--i_hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: var(--i_hero-blend);
}

.hero.invert .breadcrumbs,
.hero.invert h1 {
  color: var(--whiter);
  text-shadow: var(--shadow-text);
}

/* Home > Hero */
#pageHome .hero {
  min-height: 50vh;
  background-position-y: 42%;
}
#pageHome .hero > .container {
  width: var(--container-large);
}
#pageHome .hero__content {
  width: max(40%, 25rem);
  padding: 2em 0;
}

@media screen and (max-width: 767px) {
  #pageHome {
    --i_hero-screen: radial-gradient(
    circle at 52% 55%,
    var(--cool-00),
    72%,
    rgb(255 255 255 / 0%)
  );
  }
  #pageHome .hero__content {
    width: max(80%, 21rem);
    padding: 1.5em 0;
    text-align: center;
  }
  #pageHome .hero > .container {
    justify-content: center;
  }
}


/*  CUSTOM SECTIONS
--------------------------------*/

#tempHomeIntro {
  background:
    linear-gradient(
      to top,
      var(--page-bg),
      5%,
      rgb(255 255 255 / 0%) 55%
    ),
    radial-gradient(
      circle at 62% 42%,
      var(--wistia-blue),
      42%,
      var(--brand-onyx)
    );
  background-blend-mode: overlay;
  padding: 1em 0;
}

#tempHomeIntro p {
  color: var(--whiter);
  text-align: center;
  margin: 0;
  font-size: var(--font-size-large);
  letter-spacing: var(--text-tracking-tight);
  line-height: 1.2;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #tempHomeIntro {padding: 0.75em 0;}
  #tempHomeIntro p {font-size: var(--font-size-medium);}
}


/*  FIELDS
--------------------------------*/

:is(
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  textarea,
  select
) {
  font-family: var(--text-font);
  font-size: var(--font-size-small);
  line-height: 1.4;
  padding: var(--textbox__y-padding) var(--textbox__x-padding);
  border-radius: var(--corners-dull);
  border: none;
  color: var(--blackest);
  background-color: var(--gray-05);
}

:is(
  select,
  input[type="checkbox"],
  input[type="radio"]
) {
  cursor: pointer;
}

.checkbox-group {
  display: grid;
  margin-left: 1em;
  font-size: var(--font-size-small);
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}

:is(
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  textarea,
  select
):hover {
  outline: 2px solid var(--c40b);
}

:is(
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  textarea,
  select
):focus {
  background-color: var(--whitest);
}

textarea.no-resize { resize: none; }

select.prefill {
  border: none;
  background-color: transparent;
  appearance: none;
  pointer-events: none;
  font-weight: 600;
  outline: none !important
}


/*  COMPONENT
--------------------------------*/

.headshot {
  float: right;
  margin: 2em 0 1em 1.5em;
  border-radius: var(--corners-default);
}

@media screen and (max-width: 767px) {
  .headshot {
    display: block;
    margin: 1em auto;
    width: min(90vw, 15em);
    float: none;
  }
}

/* Pitch */
.pitch {
  box-shadow: var(--shadow-modal);
}

/* Decor */
#pageHome #education {
  --i_decor-img: url('../imgs/illustration-sample.png');
  --i_decor-position: 54vw 0.5rem;
}
#pageIllustrations #illBundle {
  --i_decor-img: url('../imgs/main-bg.jpg'), var(--brand-onyx);
  --i_decor-position: 0 0;
  --i_decor-blend: color;
  text-align: center;
  padding-inline: min(4rem, 10vw);
}
#pageIllustrations #illBundle h2 { color: var(--brand-gold); }
#pageIllustrations #illBundle p {
  color: var(--whitest);
  font-size: var(--font-size-large);
}

.decor {
  background: var(--i_decor-img);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: var(--i_decor-position);
  background-size: auto;
  background-blend-mode: var(--i_decor-blend, normal);
}

@media screen and (max-width: 991px) {
  #pageHome .decor {
    background-image:
      linear-gradient(
        to top,
        var(--cool-00),
        93%,
        transparent
      ),
      var(--i_decor-img);
    background-size: 100%;
    background-attachment: scroll;
    background-position: top;
    background-repeat: no-repeat;
    padding-top: 10rem;
  }
}

/* Proof */
.proof {
  background-color: var(--gray-05);
}
.proof > .container {
  align-items: center;
  margin-block: 0.25em;
}

@media screen and (max-width: 910px) {
  .clients__logo-group {
    display: grid;
    width: 95%;
    grid-template-columns: repeat(6, calc(95% / 6));
    gap: 0.5em;
  }
  .clients__logo:nth-child(1) { grid-column: 1 / 3; }
  .clients__logo:nth-child(2) { grid-column: 3 / 5; }
  .clients__logo:nth-child(3) { grid-column: 5 / 7; }
  .clients__logo:nth-child(4) { grid-column: 2 / 4; }
  .clients__logo:nth-child(5) { grid-column: 4 / 6; }
  .clients__logo { place-self: center; }
  /*.clients__logo {
    width: calc((100vw - var(--section__x-padding)) / 5);
  }*/
}

@media screen and (max-width: 540px) {
  .clients__logo-group {
    grid-template-columns: repeat(3, calc(95% / 3));
    grid-template-rows: repeat(4, 1fr);
    gap: 0.5em;
  }
  .clients__logo:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
  .clients__logo:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
  }
  .clients__logo:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }
  .clients__logo:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
  }
  .clients__logo:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 3 / 5;
  }
}

/* Stats */
.stats__item {
  width: 30%;
}
.stats__item > p {
  margin: 0 0 0.25em;
  text-align: center;
}
.stats__number {
  display: block;
  font-size: var(--font-size-xxx-large);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--text-tracking-tight);
  color: var(--brand-blue);
}
.stats__text {
  display: block;
  font-weight: 600;
  line-height: 1.2;
  color: var(--blacker);
}

@media screen and (max-width: 767px) {
  #stats .container.row {
    flex-direction: column;
  }
  .stats__item {
    width: auto;
    box-shadow: var(--shadow-soft);
    border-radius: var(--corners-default);
    margin: 0.25em 0;
    padding: 0.375em 0.75em;

  }
  .stats__item > p {
    text-align: left;
    display: flex;
  }
  .stats__number {
    font-size: var(--font-size-xx-large);
    line-height: 1.2;
  }
  .stats__text {
    padding: 0.25em 0 0 0.75em;
  }
}

/* Testimonial */
.testimonial {
  background-color: var(--warm-05);
}
.testimonial > .container {
  align-items: center;
  margin-block: 0.625em;
}

.testimonial__body {
  margin-left: 2em;
  margin-right: 1.5em;
  align-items: center;
}
.testimonial__avatar {
  filter: saturate(0);
}
.testimonial__content {
  margin-left: 1em;
}
.testimonial__quote {
  margin: 0;
  font-size: var(--font-size-large);
  letter-spacing: var(--text-tracking-tight);
  line-height: 1.2;
  font-weight: 600;
}
.testimonial__source {
  margin-top: 1.25em;
  font-size: var(--font-size-small);
  letter-spacing: initial;
  text-transform: uppercase;
}

@media screen and (max-width: 991px) {
  .testimonial__body {
    margin-left: 1.5em;
    margin-right: 1em;
    align-items: flex-start;
  }
  .testimonial__symbol img {
    width: 5em;
  }
}
@media screen and (max-width: 767px) {
  .testimonial__symbol {
    display: none;
  }
}
@media screen and (max-width: 479px) {
  .testimonial__body {
    margin-left: 1em;
  }
  .testimonial__avatar {
    display: none;
  }
}

/* Media */
.media { position: relative; }
.media.container { width: var(--container-large); }
.media__content { width: 43%; }
.media__content .button { margin-bottom: 1em; }

.media__graphic { width: 52%; }
.media__graphic video,
.media__graphic img,
.wistia_embed {
  width: 100%;
  border-radius: var(--corners-default);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

@media screen and (max-width: 991px) {
  .media.row {
    flex-direction: column-reverse;
  }
  .media__content,
  .media__graphic {
    width: auto;
    margin-block-end: 1em;
  }
  .media__graphic .breaker {
    display: none;
  }
}

/* Specimen */
.specimen { position: relative; }
.specimen.container { width: var(--container-medium); }
.specimen__content { width: 52%; }

.specimen__product { width: 38%; }
.specimen__image {
  margin: 1em;
  width: 90%;
  border-radius: var(--corners-default);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.specimen__thumbnails {
  display: flex;
  margin: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  background-color: rgb(0 0 0 / 20%);
}
.specimen__thumbnails input {
  appearance: none;
}

.specimen__thumbnails img {
  margin: 0.5em;
  aspect-ratio: 1 / 1;
  width: 18%;
  box-shadow: var(--shadow-card);
  border-radius: var(--corners-default);
  overflow: hidden;
}
.specimen__thumbnails img:hover {
  outline: 2px solid var(--c40b);
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .specimen.row { flex-direction: column-reverse; }
  .specimen__content,
  .specimen__product {
    width: auto;
    margin-block-end: 1em;
  }
  .specimen__image {
    margin: 1em 2.5em;
    width: 80%;
  }
}

/*
.wistia_embed {
  height: 100%;
  position: relative;
  width: 100%;
}
.wistia_embed .wistia_swatch {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 200ms;
  width: 100%;
}
*/

/* Contact Form */
.contact__form {
  width: max(45%, 25ch);
  flex-shrink: 0;
  margin-left: var(--space-xl);
}

form:invalid input[type="submit"] {
  filter: saturate(25%);
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.label-field {
  margin-block: 1em;
}
.label-field > label {
  display: block;
  margin-bottom: var(--field-group__y-gap);
  color: var(--b60d);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
}
.label-field > label > * {
  display: block;
  width: 100%;
}

.grecaptcha-badge { visibility: hidden; }
.recaptcha-text {
  font-size: var(--font-size-xx-small);
  opacity: 0.75;
}

@media screen and (max-width: 767px) {
  #contactForm .container.row {
    flex-direction: column;
  }
  .contact__form {
    width: auto;
    margin: 0.25em 0 0.5em;
  }
}

/* Ribbon */
#illRibbon > .container {
  align-items: center;
  margin-block: 0.25em;
  column-gap: 3em;
}
.ribbon__pub img {
  max-width: 100%;
  height: auto;
  border-radius: var(--corners-default);
  box-shadow: var(--shadow-card);
}

#illRibbon:hover .ribbon__pub img {
  filter: saturate(0);
  opacity: 0.75;
  transition: filter 200ms, opacity 200ms;
}
#illRibbon:hover .ribbon__pub img:hover {
  filter: saturate(100%);
  opacity: 1;
  transition: filter 20ms, opacity 20ms;
}

@media screen and (max-width: 991px) {
  #illRibbon > .container { column-gap: max(1em, 2vw); }
}

@media screen and (max-width: 767px) {
  #illRibbon { padding: 0; }
  #illRibbon > .container {
    margin: 0 0 0.25em;
    column-gap: 0;
    padding: 0;
  }
  .ribbon__pub img { border-radius: 0; }
}

/* Cost */
.cost {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0.75rem 0;
  gap: 0.5rem;
}
.cost__amount {
  font-size: var(--font-size-xx-large);
  color: var(--brand-blue);
  font-weight: 700;
  margin: 0 0.25rem 0 0.75rem;
}
.cost__sh {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--text-tracking-tight);
  font-weight: 500;
  color: var(--gray-60);
}


/*  BREAKPOINTS
--------------------------------*/

/*
  Smaller:
  @media screen and (max-width: 991px) {}
  @media screen and (max-width: 767px) {}
  @media screen and (max-width: 479px) {}

  Larger:
  @media screen and (min-width: 1200px) {}
*/