/* Variables */ 
:root {
  
    /* Colours */
    --ice: rgb(241, 247, 254); /* #e5edf9 */
    --water: rgb(153, 186, 232); /* #99bae8 */
    --sky: rgb(77, 134, 215); /* #4d86d7 */ 
    --purpose: rgb(1, 83, 198); /* #0153c6 */ 
    --possibility: rgb(252, 252, 252); /* #fcfcfc */
    --cloud: rgb(231, 231, 232); /* #e7e7e8 */ 
    --dust: rgb(162, 162, 165); /* #E7E7E8 */
    --silver: rgb(91, 91, 96); /* #5b5b60 */
    --universe: rgb(22, 22, 29); /* #16161d */
    --people: rgb(255, 153, 0); /* #ff9900 */ 
    --systems: rgb(204, 0, 0); /* cc0000 */
    --innovation: rgb(77, 174, 126); /* #4dae7e */
    --products: rgb(0, 255, 224); /* #00ffe0 */ 
    --money: rgb(255, 244, 46); /* #fff42e */
    --growth: rgb(255, 0, 98); /* #ff0062 */ 
  
    /* Shapes */
    --tear: 0 50% 50% 50%; 
    --tear2: 50% 0 50% 50%; 
    --tear3: 50% 50% 0 50%; 
    --tear4: 50% 50% 50% 0; 
    --inverseTear: 50% 0 0 0; 
    --inverseTear2: 0 50% 0 0; 
    --inverseTear3: 0 0 50% 0; 
    --inverseTear4: 0 0 0 50%; 
    --tearCorner: 100px; 
  
    /* Fonts */
    --primaryFont: Jost;
    --secondaryFont: Pontano Sans; 
    --tertiaryFont: Istok Web;

    /* Fluid Scaling Variables (Min: 320px, Max: 1240px) */
    /* Mobile Base: 1.125rem (18px) | Desktop Base: 1.8rem (28.8px) */

--step-0: clamp(1.13rem, 0.89rem + 1.18vw, 1.80rem);   /* p */
  --step-1: clamp(1.27rem, 1.00rem + 1.32vw, 2.03rem);   /* h6 */
  --step-2: clamp(1.42rem, 1.12rem + 1.49vw, 2.28rem);   /* h5 */
  --step-3: clamp(1.60rem, 1.26rem + 1.68vw, 2.56rem);   /* h4 */
  --step-4: clamp(1.80rem, 1.42rem + 1.89vw, 2.89rem);   /* h3 */
  --step-5: clamp(2.03rem, 1.60rem + 2.13vw, 3.25rem);   /* h2 */
  --step-6: clamp(2.28rem, 1.80rem + 2.39vw, 3.65rem);   /* h1 */

    /* Line Heights */
    --lh-display: 1.1; /* Tighter for very large h1-h2 */
    --lh-heading: 1.2; /* Standard heading flow */
    --lh-body: 1.6;    /* Breathable paragraph flow */
  
  }
  
  * { margin: 0; font-family: var(--secondaryFont); color: var(--universe); }
  html { background: var(--possibility); color: var(--universe); }
  body { color: var(--universe); }
  
  /* Core framework styles */
  
  /* --------------- S ------------------- */ 
  /* Blues */
  .iceBack { background: var(--ice); }
  .skyBack { background:var(--sky); }
  .waterBack { background: var(--water); }
  .purposeBack { background: var(--purpose); }
  .iceFront { color: var(--ice); }
  .skyFront { background: var(--sky); }
  .waterFront { background: var(--water); }
  .purposeFront { background: var(--purpose); }
  
  /* Greys */
  /* Light */ 
  .possibilityBack { background: var(--possibility); }
  .dustBack { background: var(--dust); } 
  .possibilityFront { color: var(--possibility); }
  .dustFront { color: var(--dust); } 
  
  /*Dark*/
  .cloudBack { background: var(--cloud); }
  .silverBack { background: var(--silver); }
  .universeBack { background: var(--universe); }
  .cloudFront { color: var(--cloud); }
  .silverFront { color: var(--silver); }
  .universeFront { color: var(--universe); }
  
  /* Functional */
  
  /* Dark */
  .peopleBack { background: var(--people); }
  .systemsBack { background: var(--systems); }
  .innovationBack { background: var(--innovation); }
  .peopleFront { color: var(--people); }
  .systemsFront { color: var(--systems); }
  .innovationFront { color: var(--innovation); }
  .growthFront { color: var(--growth); }
  
  /* Light */
  .productsBack { background: var(--products); }
  .moneyBack { background: var(--money); }
  .growthBack { background: var(--growth); }
  
  /* --------------- HORIZONTAL GRADIENTS ------------------- */ 
  
  .possibilityCloudHG { background: linear-gradient(270deg, var(--cloud) 0%, var(--possibility) 100%); }
  .possibilityDustHG { background: linear-gradient(270deg, var(--dust) 0%, var(--possibility) 100%); }
  .possibilitySilverHG { background: linear-gradient(270deg, var(--silver) 0%, var(--possibility) 100%); }
  .possibilityUniverseHG { background: linear-gradient(270deg, var(--universe) 0%, var(--possibility) 100%); }
  .cloudDustHG { background: linear-gradient(270deg, var(--dust) 0%, var(--cloud) 100%); } 
  .cloudSilverHG { background: linear-gradient(270deg, var(--silver) 0%, var(--cloud) 100%); } 
  .cloudUniverseHG { background: linear-gradient(270deg, var(--universe) 0%, var(--cloud) 100%); } 
  .dustSilverHG { background: linear-gradient(270deg, var(--silver) 0%, var(--dust) 100%); } 
  .dustUniverseHG { background: linear-gradient(270deg, var(--universe) 0%, var(--dust) 100%); } 
  .silverUniverseHG { background: linear-gradient(270deg, var(--universe) 0%, var(--silver) 100%); } 
  
  .iceSkyHG { background: linear-gradient(270deg, var(--sky) 0%, var(--ice) 100%); }
  .iceWaterHG { background: linear-gradient(270deg, var(--water) 0%, var(--ice) 100%); }
  .icePurposeHG { background: linear-gradient(270deg, var(--purpose) 0%, var(--ice) 100%); }
  .skyWaterHG { background: linear-gradient(270deg, var(--water) 0%, var(--sky) 100%); }
  .skyPurposeHG { background: linear-gradient(270deg, var(--water) 0%, var(--sky) 100%); }
  .waterPurposeHG { background: linear-gradient(270deg, var(--purpose) 0%, var(--water) 100%); }
  
  .possibilityIceHG { background: linear-gradient(270deg, var(--ice) 0%, var(--possibility) 100%); }
  .possibilityWaterHG { background: linear-gradient(270deg, var(--water) 0%, var(--possibility) 100%); }
  .possibilitySkyHG { background: linear-gradient(270deg, var(--sky) 0%, var(--possibility) 100%); }
  .possibilityPurposeHG { background: linear-gradient(270deg, var(--purpose) 0%, var(--possibility) 100%); }
  .possibilityProductsHG { background: linear-gradient(270deg, var(--products) 0%, var(--possibility) 100%); }
  .possibilityMoneyHG { background: linear-gradient(270deg, var(--money) 0%, var(--possibility) 100%); }
  .possibilityGrowthHG { background: linear-gradient(270deg, var(--growth) 0%, var(--possibility) 100%); }
  
  .cloudIceHG { background: linear-gradient(270deg, var(--ice) 0%, var(--cloud) 100%); } 
  .cloudWaterHG { background: linear-gradient(270deg, var(--water) 0%, var(--cloud) 100%); } 
  .cloudSkyHG { background: linear-gradient(270deg, var(--sky) 0%, var(--cloud) 100%); } 
  .cloudPurposeHG { background: linear-gradient(270deg, var(--purpose) 0%, var(--cloud) 100%); } 
  .cloudProductsHG { background: linear-gradient(270deg, var(--products) 0%, var(--cloud) 100%); }
  .cloudMoneyHG { background: linear-gradient(270deg, var(--money) 0%, var(--cloud) 100%); }
  .cloudGrowthHG { background: linear-gradient(270deg, var(--growth) 0%, var(--cloud) 100%); }
  
  .dustPurposeHG { background: linear-gradient(270deg, var(--purpose) 0%, var(--dust) 100%); } 
  .dustPeopleHG { background: linear-gradient(270deg, var(--people) 0%, var(--dust) 100%); } 
  .dustSystemsHG { background: linear-gradient(270deg, var(--systems) 0%, var(--dust) 100%); } 
  .dustInnovationHG { background: linear-gradient(270deg, var(--innovation) 0%, var(--dust) 100%); } 
  .dustProductsHG { background: linear-gradient(270deg, var(--products) 0%, var(--dust) 100%); }
  .dustMoneyHG { background: linear-gradient(270deg, var(--money) 0%, var(--dust) 100%); }
  .dustGrowthHG { background: linear-gradient(270deg, var(--growth) 0%, var(--dust) 100%); }
  
  .peopleSilverHG { background: linear-gradient(270deg, var(--silver) 0%, var(--people) 100%); } 
  .systemsSilverHG { background: linear-gradient(270deg, var(--silver) 0%, var(--systems) 100%); } 
  .innovationSilverHG { background: linear-gradient(270deg, var(--silver) 0%, var(--innovation) 100%); } 
  .peopleUniverseHG { background: linear-gradient(270deg, var(--universe) 0%, var(--people) 100%); }
  .systemsUniverseHG { background: linear-gradient(270deg, var(--universe) 0%, var(--systems) 100%); }
  .innovationUniverseHG { background: linear-gradient(270deg, var(--universe) 0%, var(--innovation) 100%); }
  
  /* --------------- VERTICAL GRADIENTS ------------------- */ 
  
  .possibilityCloudVG { background: linear-gradient(0deg, var(--cloud) 0%, var(--possibility) 100%); }
  .possibilityDustVG { background: linear-gradient(0deg, var(--dust) 0%, var(--possibility) 100%); }
  .possibilitySilverVG { background: linear-gradient(0deg, var(--silver) 0%, var(--possibility) 100%); }
  .possibilityUniverseVG { background: linear-gradient(0deg, var(--universe) 0%, var(--possibility) 100%); }
  .cloudDustVG { background: linear-gradient(0deg, var(--dust) 0%, var(--cloud) 100%); } 
  .cloudSilverVG { background: linear-gradient(0deg, var(--silver) 0%, var(--cloud) 100%); } 
  .cloudUniverseVG { background: linear-gradient(0deg, var(--universe) 0%, var(--cloud) 100%); } 
  .dustSilverVG { background: linear-gradient(0deg, var(--silver) 0%, var(--dust) 100%); } 
  .dustUniverseVG { background: linear-gradient(0deg, var(--universe) 0%, var(--dust) 100%); } 
  .silverUniverseVG { background: linear-gradient(0deg, var(--universe) 0%, var(--silver) 100%); } 
  
  .iceSkyVG { background: linear-gradient(0deg, var(--sky) 0%, var(--ice) 100%); }
  .iceWaterVG { background: linear-gradient(0deg, var(--water) 0%, var(--ice) 100%); }
  .icePurposeVG { background: linear-gradient(0deg, var(--purpose) 0%, var(--ice) 100%); }
  .skyWaterVG { background: linear-gradient(0deg, var(--water) 0%, var(--sky) 100%); }
  .skyPurposeVG { background: linear-gradient(0deg, var(--water) 0%, var(--sky) 100%); }
  .waterPurposeVG { background: linear-gradient(0deg, var(--purpose) 0%, var(--water) 100%); }
  
  .possibilityIceVG { background: linear-gradient(0deg, var(--ice) 0%, var(--possibility) 100%); }
  .possibilityWaterVG { background: linear-gradient(0deg, var(--water) 0%, var(--possibility) 100%); }
  .possibilitySkyVG { background: linear-gradient(0deg, var(--sky) 0%, var(--possibility) 100%); }
  .possibilityPurposeVG { background: linear-gradient(0deg, var(--purpose) 0%, var(--possibility) 100%); }
  .possibilityProductsVG { background: linear-gradient(0deg, var(--products) 0%, var(--possibility) 100%); }
  .possibilityMoneyVG { background: linear-gradient(0deg, var(--money) 0%, var(--possibility) 100%); }
  .possibilityGrowthVG { background: linear-gradient(0deg, var(--growth) 0%, var(--possibility) 100%); }
  
  .cloudIceVG { background: linear-gradient(0deg, var(--ice) 0%, var(--cloud) 100%); } 
  .cloudWaterVG { background: linear-gradient(0deg, var(--water) 0%, var(--cloud) 100%); } 
  .cloudSkyVG { background: linear-gradient(0deg, var(--sky) 0%, var(--cloud) 100%); } 
  .cloudPurposeVG { background: linear-gradient(0deg, var(--purpose) 0%, var(--cloud) 100%); } 
  .cloudProductsVG { background: linear-gradient(0deg, var(--products) 0%, var(--cloud) 100%); }
  .cloudMoneyVG { background: linear-gradient(0deg, var(--money) 0%, var(--cloud) 100%); }
  .cloudGrowthVG { background: linear-gradient(0deg, var(--growth) 0%, var(--cloud) 100%); }
  
  .dustPurposeVG { background: linear-gradient(0deg, var(--purpose) 0%, var(--dust) 100%); } 
  .dustPeopleVG { background: linear-gradient(0deg, var(--people) 0%, var(--dust) 100%); } 
  .dustSystemsVG { background: linear-gradient(0deg, var(--systems) 0%, var(--dust) 100%); } 
  .dustInnovationVG { background: linear-gradient(0deg, var(--innovation) 0%, var(--dust) 100%); } 
  .dustProductsVG { background: linear-gradient(0deg, var(--products) 0%, var(--dust) 100%); }
  .dustMoneyVG { background: linear-gradient(0deg, var(--money) 0%, var(--dust) 100%); }
  .dustGrowthVG { background: linear-gradient(0deg, var(--growth) 0%, var(--dust) 100%); }
  
  .peopleSilverVG { background: linear-gradient(0deg, var(--silver) 0%, var(--people) 100%); } 
  .systemsSilverVG { background: linear-gradient(0deg, var(--silver) 0%, var(--systems) 100%); } 
  .innovationSilverVG { background: linear-gradient(0deg, var(--silver) 0%, var(--innovation) 100%); } 
  .peopleUniverseVG { background: linear-gradient(0deg, var(--universe) 0%, var(--people) 100%); }
  .systemsUniverseVG { background: linear-gradient(0deg, var(--universe) 0%, var(--systems) 100%); }
  .innovationUniverseVG { background: linear-gradient(0deg, var(--universe) 0%, var(--innovation) 100%); }

    /* Typography */
  h1, h2, h3, h4, h5, h6 { font-family: var(--primaryFont); color: var(--universe); }
  a { color: var(--growth); text-decoration: underline; }
  
  
  h1 { font-size: var(--step-6); line-height: var(--lh-display); margin-bottom: 0.4em; margin-top: 0; }
  h2 { font-size: var(--step-5); line-height: var(--lh-display); margin-bottom: 0.4em; }
  h3 { font-size: var(--step-4); line-height: var(--lh-heading); margin-bottom: 0.5em; }
  h4 { font-size: var(--step-3); line-height: var(--lh-heading); margin-bottom: 0.5em; }
  h5 { font-size: var(--step-2); line-height: 1.3; margin-bottom: 0.6em; }
  h6 { font-size: var(--step-1); line-height: 1.3; margin-bottom: 0.6em; }

  p, .label, .input, .textarea, li { font-family: var(--secondaryFont); font-size: var(--step-0); line-height: var(--lh-body); max-width: 60ch; margin-bottom: 1.5rem; font-weight: normal; color: var(--universe) }
  li { margin-bottom: 0.2em;}
  
  ul { list-style: none; }
  ul li::before { content: "⚙"; color: var(--growth); display: inline-block; width: 1.2em; }
 
  .textGradient { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  
  /* Forms */
  
  /* Style Placeholders */
  ::-webkit-input-placeholder { color: var(--dust); }
  ::-moz-placeholder { color: var(--dust); }
  :-ms-input-placeholder { color: var(--dust); }
  ::-ms-input-placeholder { color: var(--dust); }
  ::placeholder { color: var(--dust); }
  
  /* ATOMS */
  
  /* Tag */
  .tag { border: 1px solid var(--cloud); border-radius: 30px 30px 0 30px; display: inline-block; height: 50px; line-height: 28px; font-size: calc(var(--mainFontSize) * 1.2); padding: 10px 20px; font-family: var(--secondaryFont); margin-right: 10px; color: var(--silver);} 
  
  /* Buttons */
  @keyframes buttonHovered { 0% { border-radius: 30px 30px 30px 30px; } 100% { border-radius: 30px 30px 0 30px; }}
  .button { border: none; display: inline-block; transition:color .4s ease-out,background-color .4s ease-out,border-color .4s ease-out,opacity .4s ease-out,color .4s ease-out,box-shadow .4s ease-out; text-decoration:none; font-family: var(--secondaryFont); text-align: center; border-radius: 0 30px 30px 30px; font-size: calc(var(--mainFontSize) * 1.5); padding: 15px 30px; cursor: pointer; font-weight: bold; height: auto; }
  .button:hover { animation: buttonHovered 0.5s 1 forwards; }
  .button:focus { text-decoration: underline; box-shadow: 0 0 0 3px var(--people); outline: none; }
  
  .primary { background:linear-gradient(270deg,var(--purpose) 50%,var(--universe) 0); background-position:100%; background-size:200% 100%; color: var(--possibility); height: auto; } 
  .primary:hover { background-position:0; transition:all .25s ease; color: var(--possibility); } 
  .primary:active { background: var(--growth); color: var(--possibility); } 
  
  .secondary { background:linear-gradient(270deg,var(--growth) 50%,var(--universe) 0); background-position:100%; background-size:200% 100%; color: var(--possibility); } 
  .secondary:hover { background-position:0; transition:all .25s ease; color: var(--possibility);  } 
  .secondary:active { background: var(--purpose); color: var(--possibility); } 
  
  .tertiary { padding: 14px 30px; background:linear-gradient(270deg,var(--possibility) 50%,var(--universe) 0); background-position:100%; background-size:202% 100%; color: var(--universe); border: 1px solid var(--universe); } 
  .tertiary:hover { background-position:0; transition:all .25s ease; color: var(--possibility); } 
  .tertiary:active { background: var(--growth); color: var(--possibility); } 


  .level-item .navbar-item img { max-height: 75px; /* Or whatever height you prefer */ height: auto; }

  @media screen and (max-width: 1023px) {
    .container.is-fluid {
        padding-left: 10px;  /* Default is usually 32px */
        padding-right: 10px;
    }
  }

nav a { color: var(--universe); text-decoration: none; font-weight: bold; } 
nav { border-bottom: 1px solid var(--cloud);}
nav p { margin: 0;}
footer { border-top: 1px solid var(--cloud); background: var(--cloud); padding: 2em; margin-top: 3em;}
footer nav { border: 0; }
footer p { max-width: none;}

.card { box-shadow: none; border: 1px solid var(--cloud); }
label.checkbox input { transform: scale(2); margin: -2px 0 0 30px; }


/* About */
.page-about h4 { margin-top: 1em; }
.page-about img { border-radius: 4px; }


/* Magazine */
.page-magazine a { text-decoration: none; }
.page-magazine .card h3 { margin: 0; }


/* Article */
.page-article .date, .page-article .excerpt { color: var(--silver); margin-top: 20px; }
.page-article figure.main { margin: 30px 0; }
.page-article figure.main img { border-radius: 4px; }
.page-article .related a { color: var(--universe); text-decoration: none;}

/* Products */
.page-products img { border-radius: 12px; }
.page-products .primary { float: right; margin: 0; }
.page-products .product { margin-bottom: 3em;}
.page-products .image { margin-top: 2em;}

/* Homepage */
.page-home .content { text-align: center;}
.page-home .statistics .card { border: 1px solid var(--cloud); box-shadow: none; }
.page-home .content p { min-height: 3.5em; margin: 0;}
.content h3 { font-size: var(--step-6); line-height: var(--lh-heading); margin-bottom: 0.5em; font-weight: bold; color: var(--purpose); }
.page-home .photography img { border-radius: 4px;}

/* Admin section */
thead { font-weight: bold;}
.page-admin .actions a { text-decoration: none; float: left; }
.page-admin .actions a:hover i{ color: var(--growth); }

/* Main navigation */
nav#main { margin-bottom: 2em }
nav#main img { max-height: 62px; float: left; margin: 0 10px 0 -8px; }
nav#main a { color: var(--universe); text-decoration: none; font-family: var(--primaryFont); font-size: var(--step-5); font-weight: normal; line-height: 42px; } 
nav#main .menu-icon { color: var(--universe); margin: 4px 0 0 0;}
nav#main .menu-icon:hover { color: var(--growth); }

/* Full screen navigation */
nav#navigation a { font-size: var(--step-0); flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--universe); border-bottom: 1px solid var(--cloud); transition: background-color 0.3s ease; }
nav#navigation a:last-child { border-bottom: none; }
nav#navigation a:hover { background: var(--growth); cursor: pointer;  }
nav#navigation a span { text-align: center; }
nav#navigation a:hover span { color: var(--possibility); cursor: pointer; }

/* 1. Hide the nav by default */
nav#navigation { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--possibility); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.4s ease-in-out; z-index: 1000; }
nav#navigation.is-active { opacity: 1; visibility: visible; transform: translateY(0); }


/* Photography */
.page-photography img { border-radius: 4px; }
.page-photography p { margin-bottom: 0;}
.page-photography .primary { float: right; margin: 10px 0 0 0;}
.page-photography :is(h1, h2, h3, h4)  { margin-top: 1em; }



/* Styles for Mobile only (up to 768px) */
@media screen and (max-width: 768px) {
  
  label.checkbox input { margin: 0 0 0 10px; }

  /* Photography */
  .page-photography .primary { float: none; margin: 0;}


  /* Products */
  .page-products .primary { float: none; }
  .page-products .image { margin-top: 2em;}

}