/* Reset
---------------------------*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.4;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.2;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Fluid Type & Space
---------------------------*/

/* @link https://utopia.fyi/type/calculator?c=380,16,1.2,1300,21,1.333,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.6944rem, 0.6762rem + 0.0769vw, 0.7387rem);
  --step--1: clamp(0.8333rem, 0.7708rem + 0.2631vw, 0.9846rem);
  --step-0: clamp(1rem, 0.8709rem + 0.5435vw, 1.3125rem);
  --step-1: clamp(1.2rem, 0.973rem + 0.9558vw, 1.7496rem);
  --step-2: clamp(1.44rem, 1.0715rem + 1.5516vw, 2.3322rem);
  --step-3: clamp(1.728rem, 1.1577rem + 2.4014vw, 3.1088rem);
  --step-4: clamp(2.0736rem, 1.2184rem + 3.6007vw, 4.144rem);
  --step-5: clamp(2.4883rem, 1.2345rem + 5.2794vw, 5.524rem);
  --step-6: clamp(2.986rem, 1.1779rem + 7.613vw, 7.3634rem);
  --step-7: clamp(3.5832rem, 1.009rem + 10.8387vw, 9.8155rem);
}

/* @link https://utopia.fyi/space/calculator?c=380,18,1.2,1300,20,1.333,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|12,s-l|s-xl&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5367rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8492rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0734rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6101rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1467rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2201rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2935rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4402rem + 1.3043vw, 7.5rem);
  --space-4xl: clamp(9rem, 8.587rem + 1.7391vw, 10rem);
  --space-5xl: clamp(13.5rem, 12.8804rem + 2.6087vw, 15rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1834rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4076rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7201rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8152rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3519rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6304rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7038rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2609rem + 5.2174vw, 7.5rem);
  --space-3xl-4xl: clamp(6.75rem, 5.4076rem + 5.6522vw, 10rem);
  --space-4xl-5xl: clamp(9rem, 6.5217rem + 10.4348vw, 15rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5571rem + 2.3913vw, 2.5rem);
  --space-s-xl: clamp(1.125rem, 0.0408rem + 4.5652vw, 3.75rem);
}

/* Base
---------------------------*/

html {
  scroll-behavior: smooth;
  background: #29174a;
}

body {
  background: #59329f url(i/ssscribble-6.svg) center top;
  background-size: 110% auto;
  background: conic-gradient(
    from 45deg at 70% -10%,
    #59329f,
    #5b32a1,
    #6b35ad,
    #9839cb,
    #ca36e5,
    #dd33ee,
    #e032ef
  );
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 250;
  font-size: var(--step-0);
  color: #fff;
  background-color: #59329f;
  background-color: #402572;
  background-image: url(i/oooscillate.svg);
  background-size: 100% auto;
  background-position: center top -21em;
  background-repeat: repeat-y;
}

@media (max-width: 75em) {
  body {
    background-size: 140% auto;
  }
}

@media (max-width: 34em) {
  body {
    background-size: 200% auto;
    background-position: top right -2em;
  }
}

::selection,
::-moz-selection {
  background: #231c33;
  color: #fff;
}

a {
  cursor: pointer;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-decoration-width: 0.1em;
  text-decoration-color: #703fc9;
  transition: 0.25s ease;
}

a:hover,
a:active {
  outline: 0;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-decoration-width: 0.1em;
}

:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 760;
  margin-top: var(--space-m-l);
  margin-bottom: var(--space-xs-s);
}

h1 {
  font-size: var(--step-4);
  letter-spacing: 0.005em;
}

h2 {
  font-size: var(--step-2);

  strong {
    font-weight: 760;
  }
}

h3 {
  font-size: var(--step-1);
}

h4 {
  font-size: var(--step-0);
}

h5 {
  font-size: var(--step-0);
}

h6 {
  font-size: var(--step--1);
}

p {
  margin-bottom: var(--space-xs-s);
}

dfn,
cite,
em,
i {
  font-style: italic;
}

strong,
b {
  font-weight: 580;
}

img {
  height: auto;
}

/* Blockquote

blockquote {
  margin: var(--space-xl-2xl) auto;
  max-width: calc(38*var(--step-0)) !important;

  p{
    font-size: var(--step-1);
    text-align: center;
  }
}*/

/* Formatting */

hr,
hr.wp-block-separator {
  background: #9b84c5;
  height: 2px;
  border: none;
  display: block;
  margin: var(--space-l-xl) auto;
  width: 100%;
}

iframe,
embed,
object {
  max-width: 100%;
}

/* Lists */

ul,
ol {
  padding: 0 0 0 var(--space-xs-s);
  margin: 0 0 var(--space-xs-s) var(--space-xs-s);

  li::marker {
    font-weight: 580;
  }
  li:not(:last-child) {
    margin-bottom: var(--space-3xs);
  }
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

dl {
  margin: 0 0 var(--space-xs-s) 0;
}

dt {
  font-weight: 580;
}

dd {
  margin: 0 0 var(--space-xs-s) var(--space-xs-s);
}

/* Tables */

table,
.wp-block-table table,
table.wp-block-table {
  width: 100%;
  border-collapse: collapse;

  > tbody > tr > td,
  > tbody > tr > th,
  > tfoot > tr > td,
  > tfoot > tr > th,
  > thead > tr > td,
  > thead > tr > th {
    padding: var(--space-s) var(--space-s);
    vertical-align: top;
    border: none;

    &:first-of-type {
      border-top-left-radius: var(--space-xs);
      border-bottom-left-radius: var(--space-xs);
    }
    &:last-of-type {
      border-top-right-radius: var(--space-xs);
      border-bottom-right-radius: var(--space-xs);
    }
  }
  > tbody > tr:nth-child(even) > td {
  }
  > tbody > tr:nth-child(odd) > td {
    background: #ffffff0d;
  }
}

/* Forms
---------------------------*/

button,
.button,
input[type='button'],
input[type='submit'] {
  border: 0;
  cursor: pointer;
  display: inline-block;
  font-weight: 620;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: var(--space-2xs) var(--space-2xs);
  text-decoration: none;
  transition: all 0.25s linear;
  -webkit-appearance: none;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type='button']:hover,
input[type='button']:focus,
input[type='submit']:hover,
input[type='submit']:focus {
  text-decoration: none;
  color: #231c33;
}

.button.button-reverse {
  color: #231c33;
}

.button.button-reverse:hover,
.button.button-reverse:focus {
  box-shadow:
    0px 50px 0 0px #231c33 inset,
    0px -50px 0 0px #231c33 inset;
  color: #703fc9;
}

/* Navigation
---------------------------*/

nav {
  width: 100%;
  max-width: 62em;
  margin: 0 auto;
}

nav ul {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--space-s) var(--space-l);
  flex-wrap: wrap;
  list-style: none;
}

nav ul a {
  font-weight: 380;
  letter-spacing: 0.04em;
}

/* Header
---------------------------*/

.logo {
  width: 4.5em;
}

.top-nav {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, var(--space-s-m));
  width: min(100%, 62em);
  padding: 0 var(--space-s-m);

  ul {
    justify-content: flex-end;

    a {
      font-size: var(--step--1);
      padding: 0.75em 1.5em;
      border-radius: 3em;
      letter-spacing: 0;
      background: #59329f;
      color: #fff;

      &:focus,
      &:hover {
        background: #5f3b9e;
        color: #fff;
      }
    }
  }
}

/* Content
---------------------------*/

main {
  overflow: hidden;
}

section {
  position: relative;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-l-xl);

  h2:first-of-type {
    max-width: 13em;
    font-size: var(--step-5);
    font-weight: 760;
    letter-spacing: 0.005em;

    & + p {
      max-width: 22em;
      margin-bottom: var(--space-l-xl);
      font-size: var(--step-1);
      font-weight: 240;
    }
    span {
      text-decoration: underline;
      text-decoration-thickness: 0.14em;
      text-decoration-width: 0.14em;
      text-decoration-color: #e032ef;
    }
  }
  ul {
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-m-l);

    li {
      max-width: 15em;
      font-size: var(--step-4);
      font-weight: 760;
      text-align: left;
      line-height: 1.2;
      display: flex;
      align-items: center;
      gap: 0.4em;

      &:before {
        content: '';
        width: 0.45em;
        height: 0.45em;
        display: block;
        background: #e032ef;
        border-radius: 100%;
        flex-shrink: 0;
      }
      span {
        text-decoration: underline;
        text-decoration-thickness: 0.1em;
        text-decoration-width: 0.1em;
        text-decoration-color: #e032ef;
      }
    }
  }
}

section > :is(:first-child) {
  margin-top: 0;
}

section > :is(:last-child) {
  margin-bottom: 0;
}

section > * {
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}

/* Intro
---------------------------*/

.intro {
  width: min(100%, 62em);
}

.intro-section {
  position: relative;
  max-width: none;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5em;

  & > :is(:first-child) {
    margin-top: 0;
  }
  & > :is(:last-child) {
    margin-bottom: 0;
  }
  :has(+ .scroll-arrow) {
    margin-bottom: 0;
  }
  .logo {
  }
}

.scroll-arrow {
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  bottom: 3em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98.62 57.8'%3E%3Cpath style='fill:none;stroke:%23fff;stroke-miterlimit:10;stroke-width:12px' d='m4.24 4.24 45.07 45.07L94.37 4.25'/%3E%3C/svg%3E");
  transition: 0.25s ease;
  opacity: 0.7;

  &:hover {
    opacity: 1;
  }
}

/* Contact
---------------------------*/

.contact {
  width: min(100%, 62em);
}

.contact-section {
  position: relative;
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & > :is(:first-child) {
    margin-top: 0;
  }
  & > :is(:last-child) {
    margin-bottom: 0;
  }
}

.email-container {
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 1em;
  padding: 0.6em 0.6em 0.6em 1.2em;
  box-shadow: 0 0 1em -0.5em #231c33ab;
}

.email-input {
  background: transparent;
  border: none;
  outline: none;
  flex-grow: 1;
  min-width: 0;
  margin-right: 0.6em;
  color: #59329f;
}

.email-input::placeholder {
  color: #8d6bc9;
}

.contact-form {
  display: flex;
  flex-direction: column;
  max-width: 26em;
  margin: 0 auto;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

.grepatcha-msg {
  margin: var(--space-s) auto 0;
  font-size: var(--step--1);
  max-width: 70%;
}

.submit-button {
  background: #59329f;
  color: white;
  border: none;
  padding: 1em 2em;
  border-radius: 0.75em;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: var(--step--1);
  text-transform: uppercase;

  &:hover,
  &:focus {
    background: #371f63;
    color: white;
  }
}

#thank-you-message {
  font-weight: 580;
  font-size: var(--step-0);
  max-width: 27em !important;
}

/* People
---------------------------*/

.people {
  background: #462583;
  padding: var(--space-3xl-4xl) var(--space-l-xl) !important;
  margin: 0 auto !important;
}

.person-wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 53em;
  gap: 3em;
  justify-content: center;
}

.person {
  display: flex;
  flex-direction: column;
  text-align: left;
  max-width: 22em;
  background: #fff;
  color: #222;
  padding: 2em;
  border-radius: 1em;
  margin: 0;
  box-shadow:
    0 0 0 1px rgba(35, 28, 51, 0.02),
    0 0.2em 1.6em -0.8em rgba(35, 28, 51, 0.2),
    0 0.4em 2.4em -1.2em rgba(35, 28, 51, 0.3),
    0 0.4em 0.8em -1.2em rgba(35, 28, 51, 0.4),
    0 0.8em 1.2em -1.6em rgba(35, 28, 51, 0.5),
    0 1.2em 1.6em -2em rgba(35, 28, 51, 0.6);

  .portrait {
    border-radius: 100%;
    width: 9em;
    height: 9em;
    margin: 0 auto;
    margin-bottom: var(--space-xs-s);

    &.circle {
      background: #ebe7f1;
    }
  }
  h3 {
    font-size: var(--step-1);
    text-align: center;
    margin: 0;
  }
  .title {
    text-align: center;
    margin: 0 0 var(--space-xs-s);
    font-weight: 580;
  }
}

.advisor {
  max-width: 21em;

  a {
    color: #bfa4ef;
    text-decoration-color: #bfa4ef;
  }
  a:hover,
  a:active {
    color: #fff;
    text-decoration-color: #fff;
  }
}

/* Company
---------------------------*/

.company {
  background: #29174a;
  padding: var(--space-3xl-4xl) var(--space-l-xl);
  margin: 0 auto;

  h3 {
    font-size: var(--step-1);
    font-weight: 580;
  }
  p {
    width: 85%;
    max-width: 17em;
    font-size: var(--step-2);
    font-weight: 580;
  }
}

svg.mirror {
  width: 80%;
  max-width: 20em;
  margin: var(--space-3xl-4xl) 0 0;

  circle {
    fill: #703fc973;
    stroke-width: 0;
  }
}

/* Article
---------------------------*/

article {
  margin: 0 auto;
  padding: 0 var(--space-l-xl);
  width: min(100%, 48em);

  & > :is(:first-child) {
    margin-top: 0;
  }
  & > :is(:last-child) {
    margin-bottom: 0;
  }
  &.policy {
    padding: var(--space-2xl-3xl) var(--space-l-xl);
  }
}

/* Footer
---------------------------*/

footer {
  background: #2e1a54eb;
  border-top: 1px solid #583a8f;
  position: relative;
  overflow: hidden;
  padding: var(--space-xl-2xl) var(--space-l-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l-xl);

  > * {
    max-width: 46em;
    margin-left: auto;
    margin-right: auto;
  }
  .logo {
    width: 2.5em;
    opacity: 0.4;
  }
  .legal {
    font-size: var(--step--1);
    opacity: 0.5;
    margin: 0;
  }
  nav {
    font-size: var(--step--1);
  }
}