/* Consulting page styles.
   Loaded after ../css/main.css, so the nav, fonts and background all come from the site.
   Everything here is prefixed .co- so nothing leaks out and nothing on the main site
   (#hero, .section) collides with it. */

:root {
  --co-purple: #32195a;
  --co-panel: #160f40;
  --co-panel-2: #1c1350;
  --co-accent: #8b47c9;
  --co-accent-hi: #a463e0;
  --co-lav: #b7acde;
  --co-text: #ededf6;
  --co-muted: #9187b8;
  --co-line: rgba(183, 172, 222, .14);
  --co-line-2: rgba(183, 172, 222, .3);
  --co-head: 'Poppins', system-ui, sans-serif;
  --co-body: 'Jost', system-ui, sans-serif;
  --co-maxw: 1000px;
}


/* ==========================================================================
   Layout and type
   ========================================================================== */

.co-wrap {
  max-width: var(--co-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.co-section {
  padding: 60px 0;
}

.co-eyebrow {
  font-family: var(--co-head);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--co-accent-hi);
}

.co-h1 {
  font-family: var(--co-head);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.01em;
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  color: #fff;
  margin: 0 0 18px;
}

.co-h1 em {
  font-style: normal;
  color: var(--co-accent-hi);
}

.co-h2 {
  font-family: var(--co-head);
  font-weight: 700;
  line-height: 1.12;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  color: #fff;
  margin: 12px 0;
}

.co-h3 {
  font-family: var(--co-head);
  font-weight: 600;
  font-size: 1.16rem;
  color: #fff;
  margin: 0;
}

.co-p {
  font-family: var(--co-body);
  color: var(--co-lav);
  font-weight: 400;
  margin: 0;
}

/* the little diamond, borrowed from the swiper bullets on the home page */
.co-dia {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: currentColor;
  rotate: 45deg;
  flex: none;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

/* the class carries its own styling because main.css resets every button */
.co-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--co-head);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 8px;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s;
}

.co-btn--purple {
  background: linear-gradient(180deg, var(--co-accent-hi), var(--co-accent));
  color: #fff;
  box-shadow: 0 10px 18px -12px rgba(139, 71, 201, .75);
}

.co-btn--purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 18px -8px rgba(139, 71, 201, .55);
}

.co-btn--ghost {
  background: transparent;
  color: var(--co-text);
  border: 1px solid var(--co-line-2);
}

.co-btn--ghost:hover {
  border-color: var(--co-lav);
}

.co-btn-mini {
  display: inline-flex;
  align-items: center;
  font-family: var(--co-head);
  font-weight: 600;
  font-size: .85rem;
  color: var(--co-r, var(--co-lav));
  background: transparent;
  border: 1px solid var(--co-r, var(--co-lav));
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s, transform .15s;
}

.co-btn-mini:hover {
  background: var(--co-r, var(--co-lav));
  color: #0a0a23;
  opacity: 1;
  transform: translateY(-1px);
}


/* ==========================================================================
   Hero
   ========================================================================== */

.co-hero {
  position: relative;
  padding: 40px 0 30px;
  overflow: hidden;
}

/* the drifting diamond field behind the hero */
.co-hero-dias {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background-image:
    linear-gradient(135deg, rgba(50, 25, 90, .55) 25%, transparent 25%),
    linear-gradient(225deg, rgba(50, 25, 90, .55) 25%, transparent 25%),
    linear-gradient(45deg, rgba(50, 25, 90, .55) 25%, transparent 25%),
    linear-gradient(315deg, rgba(50, 25, 90, .55) 25%, transparent 25%);
  background-position: 23px 0, 23px 0, 0 0, 0 0;
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
  animation: co-drift 10s linear infinite;
}

.co-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
}

.co-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--co-head);
  font-size: .82rem;
  font-weight: 500;
  color: var(--co-lav);
  border: 1px solid var(--co-line-2);
  background: rgba(50, 25, 90, .4);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.co-chip .co-dia {
  width: 7px;
  height: 7px;
  color: var(--co-accent-hi);
  animation: co-pulse 2.4s ease-in-out infinite;
}

.co-lede {
  font-family: var(--co-body);
  font-size: 1.18rem;
  color: var(--co-lav);
  max-width: 42ch;
  margin: 0 0 28px;
}

.co-cta-row {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}

.co-hero-art {
  position: relative;
  width: auto;
}

.co-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--co-line-2);
  background: linear-gradient(180deg, #241659, #150e34);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .75);
  animation: co-float 6s ease-in-out infinite;
}

.co-floaty {
  animation: co-float 6s ease-in-out infinite;
}


.co-frame img {
  width: 100%;
  display: block;
}

.co-cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--co-head);
  font-weight: 600;
  font-size: .8rem;
  color: #fff;
  background: rgba(10, 10, 35, .62);
  border: 1px solid var(--co-line);
  padding: 6px 12px;
  border-radius: 7px;
}


/* ==========================================================================
   The options
   ========================================================================== */

/* the intro sitting above the cards */
.co-head {
  margin-bottom: 40px;
}

/* keeps the intro to a comfortable reading line instead of the full width */
.co-head .co-p {
  max-width: 62ch;
}

.co-tiers {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.co-tier-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}

.co-tier-row-item {
  flex: 1 0 0%;
}


.co-tier-item-row {
  /* distribute horizontally on wide screens*/
  display: flex;
  flex-direction: row;
}

.co-tier-row-item {
  width: 50%;
}

.co-tier {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--co-panel), var(--co-panel-2));
  border: 1px solid var(--co-line);
  border-top: 2px solid var(--co-r, var(--co-lav));
  border-radius: 12px;
  padding: 24px 22px;
  transition: transform .18s, border-color .2s, box-shadow .2s;
}

/* Each card gets its own accent, set once and reused by its icon, bullets,
   price diamond, ribbon and button through the --co-r variable. The colour
   walks up with the level of commitment: free, one-off, ongoing. */
.co-tiers>.co-tier {
  --co-r: #b7acde;
}

.co-tier-row>.co-tier:nth-child(1) {
  --co-r: #7d8ce6;
}

.co-tier-row>.co-tier:nth-child(2) {
  --co-r: #bb5ce6;
}

.co-tier {
  border-color: color-mix(in srgb, var(--co-r) 30%, transparent);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--co-r) 11%, transparent), transparent 62%),
    linear-gradient(180deg, var(--co-panel), var(--co-panel-2));
}

.co-tier .co-h3 {
  color: var(--co-r);
}

.co-tier:hover {
  transform: translateY(-6px);
  border-color: var(--co-r);
  box-shadow:
    0 0 0 1px var(--co-r),
    0 22px 20px -24px color-mix(in srgb, var(--co-r) 40%, transparent);
}

/* the free card keeps a white heading and stays still, so it reads as an
   option rather than as the headline product */
.co-tiers>.co-tier .co-h3 {
  color: #fff;
}



.co-ribbon {
  position: absolute;
  top: -1px;
  right: 16px;
  font-family: var(--co-head);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #0a0a23;
  background: var(--co-r, var(--co-lav));
  padding: 4px 10px;
  border-radius: 0 0 6px 6px;
}

.co-tier-header {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.co-tier-ico {
  height: 36px;
  width: 39px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--co-r, var(--co-lav));
  margin-bottom: 0;
  transition: transform .22s;
}

.co-tier-ico::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: currentColor;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-mask-image: var(--co-ico);
  mask-image: var(--co-ico);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}



.co-tier .co-h3 {
  margin-bottom: 8px;
}

.co-tier-header .co-h3 {
  margin: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.co-tier-header .co-studio-title {
  margin: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.co-tier-tagline {
  font-family: var(--co-body);
  font-size: .92rem;
  color: var(--co-lav);
  line-height: 1.5;
  margin: 0 0 14px;
}

.co-gets {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-gets li {
  font-family: var(--co-body);
  font-size: .9rem;
  color: var(--co-text);
  padding-left: 20px;
  position: relative;
}

.co-gets li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .5em;
  width: 8px;
  height: 8px;
  background: var(--co-r, var(--co-lav));
  rotate: 45deg;
}

/* margin-top:auto keeps the price row on the bottom edge whatever the card height */
.co-tier-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--co-line);
}

.co-price {
  font-family: var(--co-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .45em;
  line-height: 1;

  display: flex;
  align-items: center;
  flex: 1 0 0;
}

.co-price .co-dia {
  width: 12px;
  height: 12px;
  color: var(--co-r, var(--co-lav));
}

.co-price small {
  font-family: var(--co-body);
  font-weight: 400;
  font-size: .78rem;
  color: var(--co-muted);
}


/* ==========================================================================
   Studios and publishers
   ========================================================================== */

/* Deliberately not a card. This is a different audience to the tiers above,
   and giving it a card put it in the same comparison as a $175 session, which
   made the cheaper options look like the lesser version of the same thing. */
.co-studio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 38px;
  padding: 26px 2px 4px;
  border-top: 1px solid var(--co-line);
}

.co-studio-main {
  min-width: 0;
}

.co-studio-title {
  font-family: var(--co-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 6px;
}

.co-studio-copy {
  font-family: var(--co-body);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--co-muted);
  margin: 0;
  max-width: 66ch;
}

.co-studio-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--co-head);
  font-weight: 600;
  font-size: .85rem;
  color: var(--co-lav);
  background: transparent;
  border: 1px solid var(--co-line-2);
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s, color .18s;
}

.co-studio-cta:hover {
  border-color: var(--co-lav);
  color: #fff;
}


/* ==========================================================================
   What I can look at
   ========================================================================== */



.co-cover .co-wrap {
  text-align: center;
}

.co-marquee {
  overflow: hidden;
  border-top: 1px solid var(--co-line);
  border-bottom: 1px solid var(--co-line);
  background: rgba(50, 25, 90, .16);
  padding: 15px 0;
  margin-top: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.co-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: co-marq 52s linear infinite;
}

.co-marquee:hover .co-marquee-track {
  animation-play-state: paused;
}

.co-tagpill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: 44px;
  font-family: var(--co-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--co-lav);
  white-space: nowrap;
}

.co-tagpill .co-dia {
  width: 7px;
  height: 7px;
  color: var(--co-accent-hi);
}


/* ==========================================================================
   About
   ========================================================================== */

.co-about {
  background: rgba(50, 25, 90, .14);
}

.co-about-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: center;
}

.co-about-art {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--co-line-2);
  box-shadow: 0 26px 56px -30px rgba(0, 0, 0, .7);
}

.co-about-art img {
  width: 100%;
  display: block;
}

.co-about-body .co-h2 {
  margin: 12px 0 18px;
}

.co-about-body .co-p+.co-p {
  margin-top: 14px;
}

.co-stats {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.co-stat b {
  font-family: var(--co-head);
  font-weight: 800;
  font-size: 1.8rem;
  color: #fff;
  display: block;
  line-height: 1;
}

.co-stat span {
  font-family: var(--co-body);
  font-size: .85rem;
  color: var(--co-muted);
}

.co-gallery-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  /*hide scrollbar*/
  scrollbar-width: 16px;
  scrollbar-color: var(--co-line) transparent;
  height: 200px;
  padding-bottom: 20px;
  margin-bottom: 40px;
}

.co-gallery-row img {
  height: 100%;
  border-radius: 4px;

}


/* ==========================================================================
   Get in touch
   ========================================================================== */

.co-final {
  text-align: center;
}

.co-final .co-h2 {
  max-width: 18ch;
  margin: 12px auto 24px;
}

.co-final-note {
  margin-top: 18px;
  font-size: .92rem;
}


/* ==========================================================================
   Motion
   ========================================================================== */

/* sections start visible, so the page still reads with JavaScript switched off.
   the .js class is set in the <head>, and only then do they wait to fade in. */
.co-reveal {
  opacity: 1;
  transform: none;
}

.js .co-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.js .co-reveal.co-in {
  opacity: 1;
  transform: none;
}

@keyframes co-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes co-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(164, 99, 224, .5);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(164, 99, 224, 0);
  }
}

@keyframes co-drift {
  to {
    background-position: 69px 46px, 69px 46px, 46px 46px, 46px 46px;
  }
}

@keyframes co-marq {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {

  .co-frame,
  .co-hero-dias,
  .co-chip .co-dia,
  .co-marquee-track {
    animation: none;
  }
}


/* ==========================================================================
   Small screens
   ========================================================================== */

/* the nav overflow fix now lives in css/main.css so it applies site-wide */

@media (max-width: 860px) {
  .co-section {
    padding: 60px 0;
  }

  .co-hero {
    padding: 20px 10px;
    overflow: visible;

  }

  .co-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;

  }

  .co-hero-art {
    /*make this shrink the internal contents to fit 50% of the height but remain proportional*/
    height: 40vh;
    margin-bottom: -5vh;
    /*don't clip the image if it's bigger*/

  }

  .co-tier-row {
    flex-direction: column;
  }

  .co-studio {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .co-studio-cta {
    align-self: stretch;
    justify-content: center;
  }


  .co-tier-item-row {
    /* distribute horizontally on wide screens*/
    display: flex;
    flex-direction: column;
  }

  .co-gets {
    margin-bottom: 8px;
  }

  .co-tier-row-item {
    width: auto;
  }


  .co-hero-art img {
    max-height: 40vh;
    width: auto;
    height: auto;
  }

  .co-tiers {
    grid-template-columns: 1fr;
  }

  .co-about-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .co-about-art {
    order: -1;
    max-width: 420px;
  }

  .co-hero-art,
  .co-about-art {
    justify-self: center;
  }

  /* stack the price over a full-width button so the card never gets forced wider */
  .co-tier-foot {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
  }

  .co-tier-foot .co-btn-mini {
    justify-content: center;
  }
}