@import url(reset.css);
@import url(navigation.css);

@font-face {
    font-family: 'GTPlanar-Light';
    font-style: normal;
    src: url('../fonts/GT-Planar-Light.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    
  }

  @font-face {
    font-family: 'GTPlanar-Thin';
    font-style: normal;
    src: url('../fonts/GT-Planar-Thin.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  @font-face {
    font-family: 'GTPlanar-Italic-Light';
    font-style: normal;
    src: url('../fonts/GT-Planar-Italic-30-Light.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  @font-face {
    font-family: 'GTPlanar-Retalic-Light';
    font-style: normal;
    src: url('../fonts/GT-Planar-Retalic-30-Light.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  @font-face {
    font-family: 'GTPlanar-Italic-Thin';
    font-style: normal;
    src: url('../fonts/GT-Planar-Italic-30-Thin.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  @font-face {
    font-family: 'GTPlanar-Retalic-Thin';
    font-style: normal;
    src: url('../fonts/GT-Planar-Retalic-30-Thin.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }


@media (max-width: 1429px) {
  :root {
    --col-total: calc(100vw - 40px);
    --col-one: calc(var(--col-total) / 12);
    --col-two: calc(var(--col-one) * 2);
    --col-three: calc(var(--col-one) * 3);
    --col-four: calc(var(--col-one) * 4);
    --col-five: calc(var(--col-one) * 5);
    --col-six: calc(var(--col-one) * 6);
    --col-seven: calc(var(--col-one) * 7);
    --col-eight: calc(var(--col-one) * 8);
    --col-nine: calc(var(--col-one) * 9);
    --col-ten: calc(var(--col-one) * 10);
    --col-eleven: calc(var(--col-one) * 11);
  }
}

@media (min-width: 1430px) {
  :root {
    --col-total: 1390px;
    --col-one: calc(var(--col-total) / 12);
    --col-two: calc(var(--col-one) * 2);
    --col-three: calc(var(--col-one) * 3);
    --col-four: calc(var(--col-one) * 4);
    --col-five: calc(var(--col-one) * 5);
    --col-six: calc(var(--col-one) * 6);
    --col-seven: calc(var(--col-one) * 7);
    --col-eight: calc(var(--col-one) * 8);
    --col-nine: calc(var(--col-one) * 9);
    --col-ten: calc(var(--col-one) * 10);
    --col-eleven: calc(var(--col-one) * 11);
  }
}



:root {  
    --scrollbar-fix: 0px;
    --sero-neon: #C5FF49;
    --sero-grey: #E5E6E8;
    --sero-purple: #944AFF;
    --headline-xxl: 90px;
    --headline-xl: 60px;
    --headline-l: 40px;
    --headline-m: 30px;
    --headline-s: 20px;
    --copy-m: 22px;
    --copy-s: 16px;
    --whitespace-xs: 20px;
    --whitespace-s: 40px;
    --whitespace-m: 60px;
    --whitespace-l: 80px;
    --whitespace-xl: 160px;
    --test: 1px solid salmon;
}

@media (max-width: 599px) {
  :root {
    --headline-xxl: 90px;
    --headline-xl: 50px;
    --headline-l: 30px;
    --headline-m: 26px;
    --headline-xm: 23px;
    --headline-s: 20px;
    --copy-m: 18px;
    --copy-xm: 15px;
    --copy-s: 13px;
    --whitespace-xs: 10px;
    --whitespace-s: 20px;
    --whitespace-m: 30px;
    --whitespace-l: 40px;
    --whitespace-xl: 60px;
  }
}


html, body {
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    box-sizing: border-box;
}


body {
  width: 100%;
  max-width: 1430px;
  margin: 0 auto;
  padding: 20px 20px 0 20px;
}


h1 {
  font-family: 'GTPlanar-Light';
  font-size: var(--headline-l);
}

h2 {
  font-family: 'GTPlanar-Light';
  font-size: var(--headline-l);
}

.gradient-back h2 {
  padding-left: 10px;
}

h3 {
  font-family: 'GTPlanar-Light';
  font-size: var(--headline-l);
}

h4 {
  font-family: 'GTPlanar-Italic-Thin';
  color: var(--sero-purple);
  font-size: var(--copy-m);
}

h5 {
  font-family: 'GTPlanar-Thin';
  font-size: var(--headline-l);
}

a {
  text-decoration: none;
  font-family: 'GTPlanar-Thin';
  font-size: var(--copy-s);
  color: black;
}

a:active, a:visited {
  color: black;
}

b {
  font-family: 'GTPlanar-Retalic-Light';
}

strong {
  font-family: 'GTPlanar-Italic-Light';
}

em {
  font-family: 'GTPlanar-Retalic-Thin';
}

i {
  font-family: 'GTPlanar-Italic-Thin'; 
}

mark {
  font-family: 'GTPlanar-Light';
  background-color: transparent;
  color: var(--sero-purple);
}

.enlighten {
  font-family: 'GTPlanar-Light';
} 

p {
  font-family: 'GTPlanar-Thin';
  font-size: var(--copy-m);
  line-height: 110%;
}

.lead-in::before {
  display: block;
  height: 10px;
  border-left: 1px solid black ;
  border-right: 1px solid black ;
  margin-bottom: 10px;
  content: '';
}

.lead-out::after {
  display: block;
  height: 10px;
  border-left: 1px solid black ;
  border-right: 1px solid black ;
  margin-top: 10px;
  content: '';
}

section {
  margin-top: var(--whitespace-s); 
  margin-bottom: var(--whitespace-l);
}

.connect {
 margin-top: calc(var(--whitespace-l) * -1) ; 
}

section:first-of-type {
  margin-top: 0;
  margin-bottom: -80px;
}

.section-head {
  width: var(--col-two);
}

/* Stage */
.stage, .stage-gradient {
  display: flex;
  flex-direction: column;
  min-height: 90vh;
  justify-content: center;
  row-gap: var(--whitespace-m);
  margin-bottom: 0;
}

.small-stage {
    min-height: 50vh !important;
    margin-bottom: 0;
  }

.stage-gradient {
  background-image: url("../assets/gradients/srtn-grad-16x9.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--col-total);
  aspect-ratio: 16/9;

}

section.stage h1 {
  width: var(--col-five);
  margin-left: var(--col-one);
}

section.stage.stage-tpm h1, section.stage.stage-tcf h1 {
  width: var(--col-eight);
  margin-left: var(--col-one);
}

h1.program-head {
  color: white;
  font-family: 'GTPlanar-Italic-Light';
  font-size: var(--headline-xxl);
}

p.copy.program-copy {
  font-size: var(--headline-m);
}

section.stage.stage-tcf h1.program-head {
  color: black;
}

section.stage p {
  width: var(--col-four);
  margin-left: var(--col-five);
}

section.stage.stage-tpm p, section.stage.stage-tcf p {
  width: var(--col-six);
  margin-left: var(--col-five);
}

section.stage.stage-tcf p {
  color: black;
}

p.program-copy {
  color: white;
  font-size: var(--headline-l);
}

/* Hero Module */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("../assets/gradients/srtn-grad-16x9.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--col-total);
  aspect-ratio: 16/9;
}

section.hero p {
  width: var(--col-six);
  margin-left: var(--col-three);
  font-size: var(--headline-l);
}

.quote-purple { background-image: url("../assets/gradients/srtn-grad-16x9-quote-purple.svg"); }
.quote-silver { background-image: url("../assets/gradients/srtn-grad-16x9-quote-silver.svg"); }
.quote, .source {color: white;}
.quote-slv, .source-silver {color: black;}
.source, .source-silver { font-size: var(--headline-m) !important; text-align: right;}

/* Gradient Variations */

.variation { background-image: url("../assets/gradients/srtn-grad-var-16x9.svg"); row-gap: var(--whitespace-s); }
.silver { background-image: url("../assets/gradients/srtn-grad-16x9-silver.svg"); }
.stage-shift {background-image: url("../assets/gradients/srtn-grad-16x9-shift.svg");}
.stage-tpm {background-image: url("../assets/gradients/srtn-grad-purple-16x9.svg");}
.stage-tcf {background-image: url("../assets/gradients/srtn-grad-silver-var-16x9.svg");}
.clean {background: none;}

.variation h5 {
  width: var(--col-three);
  margin-left: var(--col-four);
  font-family: 'GTPlanar-Retalic-Thin';
}

.variation h5:nth-child(2) {
  margin-left: var(--col-five);
  font-family: 'GTPlanar-Italic-Thin';
}

/* Content Module */

.text-area {
  width: var(--col-eight);
  margin-left: var(--col-three);
  display: flex;
  flex-direction: column;
  row-gap: var(--whitespace-s);
}

.text-area p {
  align-self: flex-start;
  width: var(--col-six);
  flex-shrink: 0;
  font-size: var(--copy-m);
}

p.highlight {
  align-self: flex-end;
  width: var(--col-six);
  font-size: var(--headline-l);
}

.text-area h3 {
  width: var(--col-three);
  margin-left: var(--col-four);
  margin-top: var(--whitespace-s);
}

.text-area h3.var {
  margin-left: var(--col-three);
}

.list li{
  font-family: 'GTPlanar-Thin';
  font-size: var(--copy-m);
  list-style-position:outside;
  list-style-type: '\2192';
  padding-left: 10px;
  margin-left: 10px;
  line-height: 150%;
}

.accordion {
  border-bottom: 1px solid black;
  width: var(--col-six);
}


sero-accordion .accordion:first-of-type {
  border-top: 1px solid black;
  margin-top: var(--whitespace-s);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--whitespace-xs);
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: 'GTPlanar-Thin';
  font-size: var(--headline-m);
  color: var(--sero-purple);
}

.accordion-title {
  flex: 1;
}

.accordion-icon {
  display: inline-block;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg); 
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
  font-family: 'GTPlanar-Thin';
  font-size: var(--copy-m);
}

.accordion-content[aria-hidden="false"] {
  opacity: 1;
}

.accordion-inner {
  padding: 0px 40px 40px 20px;
}

.accordion-inner p {
  width: 100%;
}

.accordion-content h4 {
  color: black;
  margin-bottom: var(--whitespace-xs);
}

/* Grid Module */

.grid-module {
  display: flex;
  flex-direction: column;
  row-gap: var(--whitespace-l);
  width: var(--col-nine);
  margin-left: var(--col-two);
  margin-top: var(--whitespace-l);
  margin-bottom: var(--whitespace-l);
}

.grid-module p.grid-intro {
  width: var(--col-six);
  margin-left: var(--col-one);
  font-size: var(--copy-m);
}

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

.grid-item.single {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.grid-card {
  flex-grow: 0;
  flex-shrink: 0;
  width: var(--col-three);
}

.small-card-p {
  margin-top: var(--whitespace-s);
}

.card-sub {
  padding: 10px 0 20px 0;
}

.grid-card > p {
  margin-top: var(--whitespace-s);
}

.grid-card > .card-sub + p {
  margin-top: 0;
}

a.card-link {
  display: block;
  padding: 20px 0 20px 0;
}

a.card-link:hover {
  color: var(--sero-purple);
}

section.mood-image {
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 16 /9;
}

.content-row {
  width: var(--col-total);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.row-copy {
  width: var(--col-four);
  margin-left: var(--col-one);
  font-size: var(--headline-m);
}

.row-image {
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--col-five);
  aspect-ratio: 23/35;
  margin-left: var(--col-one);
}

#founder {background-image: url("../assets/images/kristina-bonitz-founder-ceo.png");}
#kristina {background-image: url("../assets/images/kristina-bonitz-founder-serotonin.png");}
#companion {background-image: url("../assets/images/kristina-bonitz-strategic-companion.png");}

section.contact {
 margin-bottom: var(--whitespace-xl);
}

#palais {
  background-image: url("../assets/images/contact-palais-ok.png");
  aspect-ratio: 149/119;
}


/* Program Section*/

.program-overview {
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--col-total);
  aspect-ratio: 1 / 1;
  background-image: url("../assets/gradients/prg-poster-grad-1x1.svg");

}

.program-overview p {
  width: var(--col-six);
  margin-left: var(--col-three);
  font-size: var(--copy-m);
}

.program {
  margin-top: var(--whitespace-m);
  width: var(--col-six);
  margin-left: var(--col-three);
  display: flex;
  flex-direction: column;
  row-gap: var(--whitespace-s);
}

.program-card a{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: var(--col-six);
  background-color: white;
  padding: var(--whitespace-s); 
  box-sizing: border-box;
  border-radius: 6px;
  margin-right: calc(var(--col-one));
}

.program-card h4 {
  color: black;
  font-family: "GTPlanar-Thin";
  align-content: center;
  height: var(--whitespace-l);
  padding-left: var(--whitespace-xs);
}

.program-logo {
  background-size: contain;
  background-repeat: no-repeat;
  height: var(--whitespace-l);
  aspect-ratio: 12 /4;
}

.shift { background-image: url("../assets/svgs/sft.svg");}
.consulting-fix { background-image: url("../assets/svgs/tcf.svg");}
.power-move { background-image: url("../assets/svgs/tpm.svg"); }
.still-point { background-image: url("../assets/svgs/tsp.svg");}

/* Program Pages */

.program-details {
  background-image: url("../assets/gradients/srtn-grad-16x9-program-details.svg");
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.program-details.silver {
  background-image: url("../assets/gradients/srtn-grad-16x9-program-details-slv.svg");
}

.details-card {
  background-color: white;
  width: var(--col-eight);
  padding-left: var(--col-one);
  padding-right: var(--col-one);
  padding-top: var(--whitespace-m);
  padding-bottom: var(--whitespace-m);
  border-radius: 6px;
  box-sizing: border-box;
}

.details-card h3 {
  font-size: var(--headline-m);
  line-height: 200%;
  margin-top: var(--whitespace-xs);
}

.details-card h3:first-of-type {
  margin-top: 0;
}

a.convert {
  font-size: var(--copy-m);
}

.program-list li{
  margin-top: var(--whitespace-xs);
  margin-bottom: var(--whitespace-xs);
  line-height: 100%;
}

li a, li a:visited {
  color: var(--sero-purple);
  font-size: var(--copy-m);
}

li a .description {
  color: black;
}

/* Video */

.video-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.video-title {
  margin-left: var(--col-one);
  width: var(--col-four);
}

.video-title img {
  width: var(--col-three);
}

.video-control {
  width: var(--col-one);
  justify-self: right;
  align-self: self-end;
  text-align: left;
  padding-left: var(--whitespace-xs);
  margin-bottom: 20px;
}

.video-wrapper {
  width: var(--col-five);
  margin-left: var(--col-one);
}

.mood-video {
  aspect-ratio: 1 / 1;
  width: var(--col-five);
  margin-right: var(--col-one);
}


.footer-divider {
  width: var(--col-total);
  height: 400px;
  background-color: var(--sero-purple);
  margin-top: var(--whitespace-l);
}


.footer-blk {background-color: black;}
.footer-purple {background-color: var(--sero-purple);}
.footer-green {background-color: var(--sero-neon);}
.footer-grey {background-color: var(--sero-grey);}



.footer-links {
  display: flex;
  flex-direction: row;
}

.footer-link {
  display: block;
  text-decoration: none;
  font-family: 'GTPlanar-Light';
  font-size: var(--copy-s);
  color: black;
  padding-top: 20px;
  padding-bottom: 60px;
}

.footer-link::before {
  display: block;
  height: 10px;
  border-left: 1px solid black ;
  margin-bottom: 10px;
  content: '';
}

.footer-link:last-child::before{
  display: block;
  height: 10px;
  border-left: none; 
  border-right: 1px solid black ;
  margin-bottom: 10px;
  content: '';
}

.copyright, .publications, .pp {
  width: var(--col-three);
}

.imprint, .insta, .linkedin {
  width: var(--col-one);
}

.end {
  display: flex;
  flex-direction: row;  
}
.end img {
  flex: 1;
} 

@media (max-width: 999px) {
  .program-card a {
    row-gap: var(--whitespace-m);
    width: var(--col-six);
    margin-left: 0;
  }

  .program-card h4 {
    font-size: var(--headline-s);
    height: var(--whitespace-l);
    padding-left: var(--whitespace-xs);
  }

  .program-logo {
    height: var(--whitespace-m);
  }
}

@media (max-width: 599px) {


  section {
  margin-top: var(--whitespace-m); 
  margin-bottom: var(--whitespace-l);
}
  
  section:first-of-type {
    margin-top: var(--whitespace-xl); 
    margin-bottom: var(--whitespace-xl); 
  }

  .section-head {
    width: var(--col-four);
    margin-bottom: var(--whitespace-l);
  }

  .connect {
  margin-top: var(--whitespace-m) ; 
}

  h4 {
      font-size: var(--copy-m);
  }

  .stage {
    min-height: 60vh;
  }


  section.stage h1 {
    width: var(--col-eight);
    margin-left: 0;
  }

  section.stage p {
    width: var(--col-seven);
    margin-left: var(--col-four);
  }

  section.hero p {
    width: var(--col-ten);
    margin-left: var(--col-one);
    font-size: var(--headline-s);
  }

  h1.program-head.long {
    font-size: var(--headline-xl);
}

  .variation h5 {
    width: var(--col-six);
    margin-left: var(--col-three);
  }
  
  .variation h5:nth-child(2) {
    margin-left: var(--col-five);
  }

 
  .stage, .stage-gradient, .hero {
    display: flex;
    flex-direction: column;
    min-height: 75vh;
    justify-content: center;
    row-gap: var(--whitespace-m);
  }
  
  .stage-gradient, .hero {
    background-image: url("../assets/gradients/srtn-grad-9x16.svg");
    aspect-ratio: 9/16;
  }


  .variation { background-image: url("../assets/gradients/srtn-grad-var-9x16.svg"); row-gap: var(--whitespace-s); }
  .silver { background-image: url("../assets/gradients/srtn-grad-9x16-silver.svg");  }
  .stage-shift { background-image: url("../assets/gradients/srtn-grad-9x16-shift.svg");}
  .stage-tpm { background-image: url("../assets/gradients/srtn-grad-purplle-9x16.svg");}
  .stage-tcf {background-image: url("../assets/gradients/srtn-grad-silver-var-9x16.svg");}
  .quote-purple { background-image: url("../assets/gradients/srtn-grad-9x16-quote-purple.svg"); }
  .quote-silver { background-image: url("../assets/gradients/srtn-grad-9x16-quote-silver.svg"); }
  .clean {background: none;}

  .quote, .quote-slv {font-size: var(--headline-l) !important;}
  .source, .source-silver { margin-top: var(--whitespace-s);}
  
  section.mood-image {
    aspect-ratio:  9/16;
  }
  

  .text-area {
    width: var(--col-total);
    margin-left: 0;
  }
  
  .text-area p {
    align-self: flex-start;
    width: var(--col-ten);
    margin-left: var(--col-one);
    flex-shrink: 0;
    font-size: var(--copy-m);
  }

  p.highlight {
    align-self: flex-end;
    width: var(--col-nine);
    font-size: var(--headline-l);
  }

  .text-area h3 {
    width: var(--col-five);
    margin-left: var(--col-four);
    margin-top: var(--whitespace-s);
  }
  
  .text-area h3.var {
    margin-left: var(--col-three);
  }
  
  .list{
    width: var(--col-ten);
    margin-left: var(--col-one);
    margin-top: var(--whitespace-s);
    margin-bottom: var(--whitespace-s);
  }

  .list li{
   line-height: normal;
   margin-top: 10px;
  }


  .accordion {
    width: var(--col-ten);
    margin-left: var(--col-one);
  }

  .accordion-header {
    padding-left: 0;
  }

  .accordion-title {
    padding-left: none;
    font-size: var(--headline-s);
  }

  .accordion-inner {
    padding: 0 40px 20px 0;
  }

.accordion-inner p {
    margin-left: 0;
  }

  .accordion-content h4 {

    margin-bottom: var(--whitespace-s);
  }

  .program-details {
    background-image: url("../assets/gradients/srtn-grad-9x16-program-details.svg");
    aspect-ratio: 9/16;
  }

   .program-details.silver {
    background-image: url("../assets/gradients/srtn-grad-9x16-program-details-slv.svg");
    aspect-ratio: 9/16;
  }

  .details-card {
    background-color: white;
    width: var(--col-ten);
    padding-top: var(--whitespace-xs);
    padding-bottom: var(--whitespace-s);
  }

  .details-card p {
    font-size: var(--copy-xm);
  }
  
  .program-overview {
    aspect-ratio: 1/ 4;
    background-image: url("../assets/gradients/prg-poster-grad-1x4.svg");
  } 
  

.program-overview p {
  width: var(--col-ten);
  margin-left: var(--col-one);
}

.program {
  margin-top: var(--whitespace-m);
  width: var(--col-total);
  margin-left: 0;
  row-gap: var(--whitespace-s);
}

.program-card a{
  flex-direction: column;
  row-gap: var(--whitespace-m);
  width: var(--col-ten);
  margin-left: var(--col-one);
}

.program-card h4 {
  height: var(--whitespace-xl);
  padding-left: 0;
}

.program-logo {
  height: var(--whitespace-xl);
}

  .content-row {
    flex-direction: column;
  }
  .content-row.reverse {
    flex-direction: column-reverse;
  }
  
  .row-copy {
    width: var(--col-ten);
    margin-left: var(--col-one);
    margin-bottom: var(--whitespace-m);
  }

  .row-copy a[href^=tel] {
    font-family: 'GTPlanar-Thin';
    font-size: var(--headline-m);
  } 

  .reverse p.row-copy {
    margin-left: 0;
    margin-top: var(--whitespace-s);
  }
  
  .row-image {
    width: var(--col-total);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 9/16;
    margin-left: 0;
  }
  
  #founder {
    background-image: url("../assets/images/kristina-bonitz-founder-ceo-9x16.png");
  }

  #companion {
    background-image: url("../assets/images/kristina-bonitz-strategic-companion-9x16.png");
  }

    #kristina {
    background-image: url("../assets/images/kristina-bonitz-founder-serotonin-9x16.png");
  }

  
  .grid-module {
    display: flex;
    flex-direction: column;
    row-gap: var(--whitespace-xl);
    width: var(--col-total);
    margin-left: 0;
    margin-top: var(--whitespace-xl);
    margin-bottom: var(--whitespace-xl);
  }

  .grid-module p.grid-intro {
  width: var(--col-ten);
  margin-left: var(--col-one);
  font-size: var(--copy-m);
}
  
  .grid-item {
    display: flex;
    flex-direction: row;
    row-gap: var(--whitespace-xl);
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .grid-item.single {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  .grid-card {
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--col-ten);
  }


  .card-sub {
    font-size: var(--headline-s);
  }
  
  a.card-link {
    font-size: var(--headline-s);
  }

  /* Video */

.video-section {
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
}

.video-wrapper {
  width: var(--col-total);
  margin-left: 0;
}

.video-control {
  order: -1;
  width: var(--col-total);
  text-align: right;
  padding-left: 0;
  padding-right: var(--whitespace-s);
}

.mood-video {
  width: var(--col-total);
  margin: 0;
}

.video-title {
  width: var(--col-total);
  margin-left: 0;
  margin-bottom: var(--whitespace-l);
  order: -2;
}

.video-title img {
  width: var(--col-ten);
  margin-left: var(--col-one);
}


  .footer-divider {
    width: var(--col-total);
    height: 200px;
    background-color: var(--sero-purple);
    margin-top: var(--whitespace-l);
  }

  .footer-blk {background-color: black;}
  .footer-purple {background-color: var(--sero-purple);}
  .footer-shift, .footer-power, .footer-still, .footer-fix {background-color: black; background-size: cover;}
  
  .footer-links {
    flex-wrap: wrap;
    }
  
    .footer-link {
      padding-top: 10px;
      padding-bottom: 0px;
    }  
    .footer-link:last-child::before{

      border-left: 1px solid black ;

    }

    .footer-link:nth-child(4)::before, .footer-link:nth-child(5)::before, .footer-link:nth-child(6)::before{
      border-right: none;
      border-left: none;
      height: 0px;
    }
  
    .footer-link:nth-child(4), .footer-link:nth-child(5), .footer-link:nth-child(6){
      margin-bottom: 20px;
    }

    .copyright, .insta {
      width: var(--col-five);
    }

    .publications, .pp {
      width: var(--col-four);
    }
  
    .imprint, .linkedin {
      width: var(--col-three);
    }
  
} 


@media (min-width: 1430px) {

  html {
    background-color: var(--sero-grey);
  }
  body {
    background-color: white;
  }
  .nav-bar {
    width: var(--col-total);
    position: fixed;
    top: 30px;
    left: auto;
    right: auto;
    padding-left: var(--col-one);
    padding-right: var(--col-one);
  }

  .small {
    width: var(--col-two);
    top: 30px;
    left: auto;
    margin-left: var(--col-one);
    right: auto;
    padding-right: 20px;
    padding-left: 20px;
  }
  
  #menu, .secondlevel-nav {
    margin-left: calc((100vw - 1430px) / 2);
    padding-left: var(--col-one);
  }
}


/* @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { */
@media only screen and (orientation : portrait) and (min-width: 720px){


  section {
  margin-top: var(--whitespace-xl); 
  margin-bottom: var(--whitespace-xl);
}

  .connect {
    margin-top: 0;
  }

  .stage-gradient, .hero {
    background-image: url("../assets/gradients/srtn-grad-9x16.svg");
    aspect-ratio: 9/16;
  }


  .variation { background-image: url("../assets/gradients/srtn-grad-var-9x16.svg"); row-gap: var(--whitespace-s); }
  .silver { background-image: url("../assets/gradients/srtn-grad-9x16-silver.svg");  }
  .stage-shift { background-image: url("../assets/gradients/srtn-grad-9x16-shift.svg");}
  .stage-tpm { background-image: url("../assets/gradients/srtn-grad-purplle-9x16.svg");}
  .stage-tcf {background-image: url("../assets/gradients/srtn-grad-silver-var-9x16.svg");}
  .quote-purple { background-image: url("../assets/gradients/srtn-grad-9x16-quote-purple.svg"); }
  .quote-silver { background-image: url("../assets/gradients/srtn-grad-9x16-quote-silver.svg"); }
  .clean {background: none;}

   
  .quote, .quote-slv  {font-size: var(--headline-l) !important;}
  .source, .source-silver { margin-top: var(--whitespace-s);}
  

.section-head {
  width: var(--col-four);
}

    .row-image {
    width: var(--col-six);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 9/16;
    margin-left: var(--col-one);
  }

    #founder {background-image: url("../assets/images/kristina-bonitz-founder-ceo-9x16.png");}
    #companion {background-image: url("../assets/images/kristina-bonitz-strategic-companion-9x16.png");}
    #kristina {background-image: url("../assets/images/kristina-bonitz-founder-serotonin-9x16.png");}


    .program-details {
    background-image: url("../assets/gradients/srtn-grad-9x16-program-details.svg");
    aspect-ratio: 9/16;
  }

    .program-details.silver {
    background-image: url("../assets/gradients/srtn-grad-9x16-program-details-slv.svg");
    aspect-ratio: 9/16;
  }


  .program-overview {
    aspect-ratio: 1/2;
    background-image: url("../assets/gradients/prg-poster-grad-1x2.svg");
  }

.program-overview p, section.hero p {
  width: var(--col-eight);
  margin-left: var(--col-two);
}

.text-area {
  width: var(--col-eight);
  margin-left: var(--col-two);
}

  .text-area p {
    align-self: flex-start;
    width: var(--col-eight);
    margin-left: 0;
    flex-shrink: 0;
    font-size: var(--copy-m);
  }

  .program {
  width: var(--col-eight);
  margin-left: var(--col-two);
}

  .program-card a{
  width: var(--col-eight);
  margin-right: 0;
}

  .accordion {
    width: var(--col-eight);
    margin-left: 0;
  }

  .connect {
    margin-top: var(--whitespace-m);
  }

  .video-section {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: var(--whitespace-xl);
}

.video-wrapper {
  width: var(--col-total);
  margin-left: 0;
}

.video-control {
  order: -1;
  width: var(--col-total);
  text-align: right;
  padding-left: 0;
  padding-right: var(--whitespace-s);
}

.mood-video {
  width: var(--col-total);
  margin: 0;
}

.video-title {
  width: var(--col-total);
  margin-left: 0;
  margin-bottom: var(--whitespace-m);
  order: -2;
}

.video-title img {
  width: var(--col-six);
  margin-left: var(--col-three);
}


  .grid-item {
    display: flex;
    flex-direction: column;
    row-gap: var(--whitespace-m);
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .grid-item.single {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


.grid-card {
  width: var(--col-eight);
}

.contact {
  justify-content: space-between;
}

section.contact {
  margin-bottom: var(--whitespace-m);
}

  p.row-copy.contact-details {
    width: var(--col-four);
    margin-left: var(--col-one);
    font-size: var(--headline-s);
  }
  .contact-image {
    justify-self:right;
  }

  .row-copy a[href^=tel] {
    font-family: 'GTPlanar-Thin';
    font-size: var(--headline-s);
  } 

}