@charset "UTF-8";
@import url("https://unpkg.com/normalize.css") layer(normalize);
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');
@font-face {
  font-family: "Montserrat Black";
  src: url("fonts/Montserrat-Black.eot");
  src: local("☺"), url("fonts/Montserrat-Black.woff") format("woff"), url("fonts/Montserrat-Black.ttf") format("truetype"), url("fonts/Montserrat-Black.svg") format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat Bold";
  src: url("fonts/Montserrat-Bold.eot");
  src: local("☺"), url("fonts/Montserrat-Bold.woff") format("woff"), url("fonts/Montserrat-Bold.ttf") format("truetype"), url("fonts/Montserrat-Bold.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Regular.eot");
  src: local("☺"), url("fonts/Montserrat-Regular.woff") format("woff"), url("fonts/Montserrat-Regular.ttf") format("truetype"), url("fonts/Montserrat-Regular.svg") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat Light";
  src: url("fonts/Montserrat-Light.eot");
  src: local("☺"), url("fonts/Montserrat-Light.woff") format("woff"), url("fonts/Montserrat-Light.ttf") format("truetype"), url("fonts/Montserrat-Light.svg") format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "MuseoModerno Black";
  src: url("fonts/MuseoModerno-Black.ttf");
  src: local("MuseoModerno-Black"), url("fonts/MuseoModerno-Black.ttf") format("truetype");
}
@font-face {
  font-family: "MuseoModerno Bold";
  src: url("fonts/MuseoModerno-Bold.ttf");
  src: local("MuseoModerno-Bold"), url("fonts/MuseoModerno-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "MuseoModerno Italic";
  src: url("fonts/MuseoModerno-Italic.ttf");
  src: local("MuseoModerno-Italic"), url("fonts/MuseoModerno-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "MuseoModerno Light";
  src: url("fonts/MuseoModerno-Light.ttf");
  src: local("MuseoModerno-Light"), url("fonts/MuseoModerno-Light.ttf") format("truetype");
}
@font-face {
  font-family: "MuseoModerno Regular";
  src: url("fonts/MuseoModerno-Regular.ttf");
  src: local("MuseoModerno-Regular"), url("fonts/MuseoModerno-Regular.ttf") format("truetype");
}
@layer normalize, base, demo, grid, setup, scroll, novelty;
@layer novelty {
  @property --flip {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @keyframes flip {
    to {
      --flip: 1;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) and (animation-range: 0 100%) {
      [data-enhanced=true] footer > span {
        animation: flip both steps(1, end);
        animation-timeline: scroll(root);
      }
      [data-enhanced=true] footer .arm {
        opacity: var(--flip);
      }
      [data-enhanced=true] footer .table {
        display: inline-block;
        transform-origin: 0 50%;
        rotate: calc((-180 + var(--flip) * 180) * 1deg);
        translate: calc(16% + var(--flip) * -16%) calc(var(--flip) * -45%);
        transform: translateY(calc(var(--flip) * 90%));
        transition-property: translate, rotate, transform;
        transition-duration: calc(var(--flip) * 0.2s);
        transition-duration: 0.2s, 0.24s, 0.5s;
      }
      [data-enhanced=true] .spring {
        outline: 1px dashed red;
        clip-path: inset(0 0 0 0);
      }
      [data-enhanced=true] .spring span {
        rotate: calc(-180deg + var(--flip) * 180deg);
        display: inline-block;
        transform-origin: 50% 150%;
        transition: rotate 0.24s;
      }
    }
  }
}
@layer scroll {
  :root {
    --power-1-out: linear(
      0 0%,
      0.0027 3.64%,
      0.0106 7.29%,
      0.0425 14.58%,
      0.0957 21.87%,
      0.1701 29.16%,
      0.2477 35.19%,
      0.3401 41.23%,
      0.5982 55.18%,
      0.7044 61.56%,
      0.7987 68.28%,
      0.875 75%,
      0.9297 81.25%,
      0.9687 87.5%,
      0.9922 93.75%,
      1 100%
    );
    --power-2-out: linear(
      0 0%,
      0.0036 9.62%,
      0.0185 16.66%,
      0.0489 23.03%,
      0.0962 28.86%,
      0.1705 34.93%,
      0.269 40.66%,
      0.3867 45.89%,
      0.5833 52.95%,
      0.683 57.05%,
      0.7829 62.14%,
      0.8621 67.46%,
      0.8991 70.68%,
      0.9299 74.03%,
      0.9545 77.52%,
      0.9735 81.21%,
      0.9865 85%,
      0.9949 89.15%,
      1 100%
    );
    --power-3-out: linear(
      0 0%,
      0.0029 13.8%,
      0.0184 21.9%,
      0.0339 25.51%,
      0.0551 28.81%,
      0.0827 31.88%,
      0.1168 34.76%,
      0.1962 39.57%,
      0.3005 44.02%,
      0.4084 47.53%,
      0.6242 53.45%,
      0.7493 57.93%,
      0.8495 62.97%,
      0.8888 65.67%,
      0.9213 68.51%,
      0.9629 73.9%,
      0.9876 80.16%,
      0.998 87.5%,
      1 100%
    );
    --sine: linear(
      0 0%,
      0.2861 18.47%,
      0.4829 32.08%,
      0.6437 44.52%,
      0.7712 56.07%,
      0.8722 67.47%,
      0.9115 73.02%,
      0.9434 78.49%,
      0.9682 83.91%,
      0.9859 89.3%,
      0.9965 94.66%,
      1 100%
    );
  }
  @keyframes fade {
    0%, 55% {
      opacity: 0;
    }
  }
  @keyframes reveal {
    0%, 30% {
      scale: 0;
    }
  }
  @keyframes scale-x {
    0%, 10% {
      width: calc(100vw - 2 * var(--gutter));
    }
  }
  @keyframes scale-y {
    0%, 10% {
      height: calc(100vh - 2 * var(--gutter));
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-enhanced=true] main section:first-of-type {
      min-height: 240vh;
    }
    @supports (animation-timeline: scroll()) and (animation-range: 0 100%) {
      [data-enhanced=true] main section:first-of-type {
        view-timeline: --runner;
      }
      [data-enhanced=true][data-center=true] .scaler img {
        animation-name: scale-x, scale-y;
        animation-fill-mode: both;
        animation-timing-function: var(--power-2-out), var(--power-1-out);
        animation-timeline: --runner, --runner;
        animation-range: entry 90% exit -20%;
      }
      [data-enhanced=true][data-layers=true] .grid .layer {
        animation-name: fade, reveal;
        animation-fill-mode: both;
        animation-timeline: --runner, --runner;
        animation-timing-function: var(--sine), var(--power-1-out);
        animation-range: entry 100% exit 0%;
      }
      [data-enhanced=true][data-layers=true][data-stagger=timing] .grid .layer:nth-of-type(1) {
        animation-timing-function: var(--sine), var(--power-1-out);
      }
      [data-enhanced=true][data-layers=true][data-stagger=timing] .grid .layer:nth-of-type(2) {
        animation-timing-function: var(--sine), var(--power-3-out);
      }
      [data-enhanced=true][data-layers=true][data-stagger=range] .grid .layer:nth-of-type(1) {
        animation-range: entry 100% exit 0%;
      }
      [data-enhanced=true][data-layers=true][data-stagger=range] .grid .layer:nth-of-type(2) {
        animation-range: entry 100% exit -10%;
      }
    }
  }
}
@layer setup {
  /* gross calculations here to appease Safari and Firefox */
  :root {
    --container-width: 1600px;
    --gap: clamp(10px, 3.35vw, 80px);
    --gutter: 2rem;
  }
  @media (max-width: 600px) {
    :root {
      --gutter: 1rem;
    }
  }
  .content {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    place-items: center;
    align-content: center;
    position: sticky;
    top: 0;
  }
  .scaler {
    z-index: 2;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .scaler img {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
  }
}
.scaler img.fade-layer {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.scaler img.fade-layer.visible {
  opacity: 1;
}
@layer grid {
  .grid {
    --offset: 0;
    width: 1600px;
    max-width: calc(100% - 2 * var(--gutter));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    gap: var(--gap);
    margin: 0 auto;
    align-content: center;
    /* hmm */
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  @media (max-width: 600px) {
    .grid {
      grid-template-columns: repeat(3, 1fr);
      /* --offset: -1; */
    }
    .grid .layer {
      grid-column: 0 !important;
    }
  }
  .grid > .layer {
    display: grid;
    grid-column: 1/-1;
    grid-row: 1/-1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    position: relative;
    z-index: 1;
  }
  .grid > .layer:first-of-type {
    pointer-events: auto; /* allow hover even if under other layers */
  }
  .grid > .layer:nth-of-type(2) {
    pointer-events: none; /* temporarily ignore hover for top layer */
  }
  .grid > div:nth-of-type(1) div:nth-of-type(odd) {
    grid-column: 1;
  }
  .grid > div:nth-of-type(1) div:nth-of-type(even) {
    grid-column: -2;
  }
  .grid > div:nth-of-type(2) div:nth-of-type(odd) {
    grid-column: calc(2 + var(--offset));
  }
  .grid > div:nth-of-type(2) div:nth-of-type(even) {
    grid-column: calc(-3 - var(--offset));
  }
  .grid > div:nth-of-type(3) div {
    grid-column: calc(3 + var(--offset));
  }
  .grid > div:nth-of-type(3) div:last-of-type {
    grid-row: -1;
  }
  .grid .scaler {
    position: relative;
    grid-area: 2/calc(3 + var(--offset));
    grid-row-start: 1;
    grid-column: 2 !important;
  }
  .grid img {
    width: 100%;
    aspect-ratio: 4/5;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 1rem;
  }
}
@layer demo {
  html {
    scrollbar-color: #14532d #ffffff;
  }
  body {
    background: canvasText;
  }
  h1 {
    --font-level: 3;
    line-height: 0.9;
    font-family: "Montserrat Light";
  }
  h2 {
    --font-level: 4;
  }
  header {
    min-height: 100vh;
    display: grid;
    margin: 0 auto;
    align-content: center;
    max-width: calc(100% - 2 * var(--gutter));
    padding-left: 48px;
    text-align: left;
  }
  body {
    display: block;
  }
  main,
  section {
    max-width: 100%;
  }
  section {
    min-height: 100vh;
  }
  .content {
    overflow: hidden;
  }
  main section:last-of-type {
    display: grid;
    place-items: center;
  }
  .content-wrap {
    overflow: clip;
    background: light-dark(#fff, #000);
    z-index: 2;
  }
  footer {
    padding: 4rem 2rem;
    text-align: center;
    position: sticky;
    bottom: 0;
    background: canvasText;
    color: canvas;
    width: 100%;
    z-index: -1;
    background: radial-gradient(hsla(0, 0%, 0%, 0.1) 2px, rgba(0, 0, 0, 0) 0) 50% 50%/40px 40px, canvasText;
  }
}
@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 305;
    --font-width-max: 1000;
  }
  html {
    color-scheme: light only;
  }
  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }
  body {
    background: light-dark(#fff, #000);
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: "Montserrat";
    font-size: x-large;
  }
  h3 {
    font-family: "MuseoModerno Black";
    font-size: xx-large;
  }
  .content-wrap::before {
    --size: 45px;
    --line: color-mix(in lch, canvasText, transparent 70%);
    content: "";
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50%/var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50%/var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
            mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
  }
  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }
  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }
  .bear-link svg {
    width: 75%;
  }
  /* Utilities */
  .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;
  }
}
[data-stick=true] div.tp-dfwv {
  position: fixed;
}

a[href] {
  color: grey;
  text-decoration: none;
  background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, canvasText, canvasText);
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
a[href]:hover {
  color: black;
  text-decoration: none;
  background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, lightgreen, darkgreen);
  background-size: 100% 2px, 100% 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.box {
  background: #000;
  border-radius: 20px;
  padding: 80px;
}

.layer {
  position: relative;
  z-index: 1;
}

.layer:nth-child(2) {
  z-index: 2;
}

/* Not a hover card anymore, just for the Our People section */
.hover-card {
  position: relative;
  display: inherit;
  overflow: hidden;
  pointer-events: auto;
}

.header--logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
}

.header--logo div {
  font-size: 10vw;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'MuseoModerno Light';
}

/* Intro, state metric section, and philosophy */
.main-sections {
  display: grid;
  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 50em) [main-end] minmax(1em, 1fr) [full-end];
}

.main-sections img {
  max-width: 100%;
}

.main-sections section {
  grid-column: main;
}

.side-by-side {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

.side-by-side__text {
  /* grid-column: 2; */
  margin-trim: block; /* only supported in Firefox 🥺 */
}
.side-by-side__text h3 {
  margin-top: 0;
}

.main-sections p, .main-sections h3, .grid-container div.card, .card-title, .card-icon {
  /* animation-name: text-appear; @keyframes defined below */
  /* animation-timing-function: ease-in; standard should be linear */
  /* animation-fill-mode: both; keeps animated values forwards and backwards */
  animation: text-appear ease-in both;
  animation-timeline: view(); /* applies animation state relative to viewport */
  animation-range: 0vh 70vh; /* set 0% and 100% positions */
}

@prefers-reduced-motion {
  p, h2, h3, blockquote, hr, img {
    animation: none;
  }
}
@keyframes image-appear {
  from {
    filter: saturate(0) contrast(4) brightness(0.1) blur(3px);
    opacity: 0;
    scale: 0.95;
    translate: 0 4rem;
  }
}
@keyframes text-appear {
  from {
    opacity: 0;
    translate: 0 8rem;
  }
}

/* CONTACT US FORM */
.background, .background:before, .background:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.background {
  font-size: 12px;
  display: flex;
  width: -webkit-fill-available;
  justify-content: center;
}

.container {
  flex: 0 1 700px;
  margin: auto;
  padding: 10px;
  margin: 5vh;
}

.screen {
  position: relative;
  background: #2e2e2e;
  border-radius: 15px;
}

.screen:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  z-index: -1;
}

.screen-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #000000;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.screen-header-left {
  margin-right: auto;
}

.screen-header-button {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 8px;
  background: white;
}

.screen-header-button.close {
  background: #ed1c6f;
}

.screen-header-button.maximize {
  background: #e8e925;
}

.screen-header-button.minimize {
  background: #74c54f;
}

.screen-header-right {
  display: flex;
}

.screen-header-ellipsis {
  width: 3px;
  height: 3px;
  margin-left: 2px;
  border-radius: 8px;
  background: #999;
}

.screen-body {
  display: flex;
}

.screen-body-item {
  flex: 1;
  padding: 50px;
}

.screen-body-item.left {
  display: flex;
  flex-direction: column;
}

.app-title {
  display: flex;
  flex-direction: column;
  position: relative;
  color: #ffffff;
  font-size: 26px;
}

.app-title:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 25px;
  height: 4px;
  background: #ffffff;
}

.app-contact {
  margin-top: auto;
  font-size: 1em;
  color: #888;
}

.app-form-group {
  margin-bottom: 15px;
}

.app-form-group.message {
  margin-top: 40px;
}

.app-form-group.buttons {
  margin-bottom: 0;
  text-align: right;
}

.app-form-control {
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  color: #ddd;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}

.app-form-control::placeholder {
  color: #666;
}

.app-form-control:focus {
  border-bottom-color: #ddd;
}

.app-form-button {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

.app-form-button:hover {
  color: #14532d;
}

@media screen and (max-width: 520px) {
  .screen-body {
    flex-direction: column;
  }

  .screen-body-item.left {
    margin-bottom: 30px;
  }

  .app-title {
    flex-direction: row;
  }

  .app-title span {
    margin-right: 12px;
  }

  .app-title:after {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .screen-body {
    padding: 40px;
  }

  .screen-body-item {
    padding: 0;
  }
}

/* along with the form for the contact panels */
.contact-panel {
  display: none;
  flex-direction: column;
  /* flex: 1; */
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-panel.active {
  display: flex;
  opacity: 1;
}

.contact-bottom {
  margin-top: auto;
}

.contact-tabs {
  display: flex;
  gap: 8px;
  /* margin-top: auto; */
  padding-top: 20px;
}

.contact-tab {
  flex: 1;
  padding: 10px 6px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #888;
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.contact-tab:hover {
  background: #2a2a2a;
  color: #ccc;
  border-color: #666;
}

.contact-tab.active {
  background: #2a2a2a;
  color: #ffffff;
  border-color: #ffffff;
}

/* for linkedIn button and for submission form */
.linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px solid #0a66c2;
  border-radius: 4px;
  color: #0a66c2;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  width: fit-content;
}

.linkedin-btn:hover {
  background: #0a66c2 !important;
  color: #fff !important;
}

.booking-check {
  margin-top: 20px;
}

.app-form-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #888;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.app-form-label input[type="checkbox"] {
  accent-color: #ffffff;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.booking-fields {
  display: none;
  margin-top: 10px;
  border-left: 2px solid #444;
  padding-left: 15px;
}

.booking-fields.visible {
  display: block;
}

.email-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px solid #b45309;
  border-radius: 4px;
  color: #b45309;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  width: fit-content;
}

.email-btn:hover {
  background: #b45309 !important;
  color: #fff !important;
}

.phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px solid #16a34a;
  border-radius: 4px;
  color: #16a34a;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  width: fit-content;
}

.phone-btn:hover {
  background: #16a34a !important;
  color: #fff !important;
}

/* First card in section stack */
.card {
  --grad: lightgreen, darkgreen;
  padding: 2.5rem;
  background-image: linear-gradient(to bottom left, #e0e4e5, #f2f6f9);
  border-radius: 2rem;
  gap: 1.5rem;
  display: grid;
  grid-template: 'title icon' 'content content' 'bar bar' / 1fr auto;
  box-shadow: 
    inset -2px 2px hsl(0 0 100% / 1),
    -20px 20px 40px hsl(0 0 0 / .25) ;
  z-index: 20;
  
  .card-title {
    font-size: 1.5rem;
    grid-area: title;
    align-self: end;
    text-transform: uppercase;
    font-weight: 500;
    word-break: break-all;
    font-family: "Montserrat Bold";
  }
  .card-icon {
    grid-area: icon;
    font-size: 3rem;
    
    > i {
      color: transparent;
      background: linear-gradient(to right, var(--grad));
      background-clip: text;
    }
  }
  .card-content {
    grid-area: content;
    & > *:first-child { margin-top: 0rem}
    & > *:last-child { margin-bottom: 0rem}
  }
  &::after {
    content: "";
    grid-area: bar;
    height: 2px;
    background-image: linear-gradient(90deg, var(--grad));
  }
}

/* Vertical Steps Style */
.steps-vertical {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0;
}

.step-vertical {
    display: flex;
    position: relative;
    padding: 1rem 0;
}

.step-vertical-icon {
  padding: 0.5rem;

  img {
      border-radius: 50%;
      position: relative;
      z-index: 2;
      animation: none !important;
      border: 10px solid #e9ecef;
  }
}

.step-vertical-content {
  padding-top: 0.5rem;

  h4 {
    width: 15vw;
    text-align: justify;
    width: 15vw;
    text-align: end;
    padding-right: 20px;
  }
}

.process-description {
  color: #525252;
}

/* Tablet (max ~768px) */
@media screen and (max-width: 768px) {
  .side-by-side {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  /* Make h3 headings span full width */
  .side-by-side > h3 {
    grid-column: 1 / -1;
  }

  /* Text blocks side by side → stacked */
  .side-by-side__text {
    grid-column: 1 / -1;
  }

  .steps-vertical {
    max-width: 100%;
  }

  .step-vertical {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step-vertical-content h4 {
    width: auto;
  }

  .step-vertical-icon img {
    width: 30vw;
    height: 30vw;
  }

  .lg-screen {
    display: none;
  }
  .sml-screen {
    display: block;
    font-size: x-large;
    border-radius: 1rem;
  }

  .hover-card h2 {
    font-size: medium;
  }
  .hover-card p {
    margin-top: 0px !important;
    font-size: small;
  }
}

/* iPhone / small mobile (max ~480px) */
@media screen and (max-width: 480px) {
  .main-sections {
    grid-template-columns: [full-start] 0.75em [main-start] 1fr [main-end] 0.75em [full-end];
  }

  .card {
    padding: 1.5rem;
    border-radius: 1.25rem;
  }

  .card-title {
    font-size: 1.2rem;
  }

  .step-vertical {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step-vertical-content h4 {
    width: auto;
    text-align: center;
    padding-right: 0;
  }

}

/* computers etc. */
@media screen and (min-width: 768px) {
  .lg-screen {
    display: block;
    font-size: medium;
  }

  .lg-screen.fade-layer {
    display: block;   /* always in the flow */
    opacity: 0;       /* hidden by default */
    transition: opacity 0.6s ease;
    cursor: pointer;
  }

  .lg-screen.fade-layer.visible {
    opacity: 1;
  }
  .sml-screen {
    display: none;
  }
}