body {
  /* font-family: "Abel", "Alegreya", "Source Serif 4", helvetica, arial, sans; */
  font-family: "Lora", "Times New Roman", times, serif;

  /* font-size: 1.1rem; */
  font-weight: 300;
  /* color: transparent; */
  /* color: #383234; */
}
#bg {
  transition: background-color 0.2s ease;
  background-color: rgba(255, 255, 255, 1);
  position: fixed;
  z-index: -10;
  top: -100vh;
  bottom: -100vh;
  left: -100vw;
  right: -100vw;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: "Barlow Condensed", helvetica, arial, sans;
  text-transform: uppercase;
}
.nav-link {
  font-family: "Barlow Condensed", helvetica, arial, sans;
  text-transform: uppercase;
}
h1 {
  font-weight: 400;
  text-align: right;
}
h2 {
  font-size: 3em;
  font-weight: 200;
}
strong {
  font-weight: 600;
}
.nav {
  /*border-bottom: 1px solid #eee;*/
  margin-bottom: 20px;
  margin-top: -14px;
}
.nav-link {
  --bs-navbar-active-color: #383234;
  font-size: 1.5rem;
  color: #383234;
  font-weight: 200;
  padding-top: 0;
}
.nav-link.active {
  font-weight: 400;
}
.tagline {
  display: flex;
  justify-content: right;
  gap: 0.6em;
  font-size: 1.2rem;
  font-weight: 200;
  max-width: 800px;
  width: 100%;
}
.chip {
  font-size: 0.8em;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #ccc;
  border-radius: 0.2em;
  color: #383234;
  background: #fff;
  text-decoration: none;
  opacity: 0.85;
}
.chip:hover,
.chip:focus {
  opacity: 1;
  text-decoration: none;
}

.stripes {
  background-image: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 25%,
    #383234 25%,
    #383234 50%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 1) 75%,
    #383234 75%,
    #383234 100%
  );
  background-size: 28px 28px;
  z-index: 2000;
}
.diagonal {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#corner-stripes {
  position: fixed;
  top: 0;
  left: -12450px;
  width: 20000px;
  height: 1995px;
  transition: left 1.3s ease-in-out;
}

small.text-muted {
  color: #c8c8c8 !important;
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #f8f8f8;
}
.embed-responsive::before {
  display: block;
  content: "";
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.container-fluid {
  max-width: 800px;
  position: relative;
}

@media (max-width: 576px) {
  h1 {
    font-size: min(16vw, 4.8rem);
    padding-left: max(15vw, 33px) !important;
    letter-spacing: -0.1rem;
    /* text-align: right; */
  }
  #tag {
    margin-left: 2px;
    margin-top: 10px;
    position: absolute;
    right: 66px;
    font-size: 14px;
    text-align: right;
  }
  .navbar {
    padding-top: 0;
    padding-right: 0;
    padding-left: 8px;
  }
  .navbar-nav {
    padding-right: 5px;
    text-align: right;
  }
}

@media (min-width: 577px) and (max-width: 991px) {
  h1 {
    font-size: min(8vw, 3.8rem);
    letter-spacing: -0.1rem;
    padding-left: max(15vw, 33px) !important;
    /* margin: 8px 0 10px 0; */
    /* text-align: right; */
  }
  #tag {
    margin-left: 2px;
    margin-top: 8px;
    position: absolute;
    right: 67px;
    text-align: right;
  }
  .navbar {
    padding-top: 0;
    padding-right: 0;
    padding-left: 8px;
  }
  .navbar-nav {
    padding-right: 5px;
    text-align: right;
  }
  iframe#surrend {
    height: 467px;
  }
}

@media (min-width: 992px) {
  h1 {
    font-size: 4.7rem;
    letter-spacing: -0.1rem;
  }
}

img,
iframe {
  max-width: 100%;
}
hr {
  margin-bottom: 23px;
}
#portrait {
  width: 40%;
  margin: 0 30%;
  opacity: 0.8;
  border: white 10px;
  mask-image: linear-gradient(
    135deg,
    transparent 11%,
    rgba(0, 0, 0, 1) 11%,
    rgba(0, 0, 0, 1) 89%,
    transparent 89%
  );
}
.embed-responsive-16by9::before {
  padding-top: 56.25%;
}
.embed-responsive-4by3::before {
  padding-top: 75%;
}

.navbar-toggler {
  margin: 10px 0;
  border: none;
  background: transparent !important;
}
.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

/* Hide any Bootstrap-provided toggler icon if present to prevent overlay */
.navbar-toggler .navbar-toggler-icon {
  display: none;
}

.navbar-toggler .icon-bar {
  background-color: #383234;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all 0.2s;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 4px;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 4px);
  transition: ease all 0.2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all 0.2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  transition: ease all 0.2s;
}

/* Enable custom slide by keeping collapse rendered */
.collapse {
  display: block !important; /* override Bootstrap's display:none when not .show */
}

/* Vertical slide for mobile navbar body */
#navbarNav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#navbarNav.show {
  /* max-height set inline by JS; keep class for state */
  will-change: max-height;
}

/* Ensure navbar is fully visible on desktop */
@media (min-width: 992px) {
  #navbarNav {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Revealers */

.revealer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 3000;
  pointer-events: none;
}

.revealer--cornertopleft,
.revealer--cornertopright,
.revealer--cornerbottomleft,
.revealer--cornerbottomright {
  top: 50%;
  left: 50%;
}

.revealer--top,
.revealer--bottom {
  left: 0;
}

.revealer--right,
.revealer--left {
  top: 50%;
  left: 50%;
}

.revealer--top {
  bottom: 100%;
}

.revealer--bottom {
  top: 100%;
}

.revealer__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: left;
  background-image: repeating-linear-gradient(
    90deg,
    white,
    white 7px,
    #383234 7px,
    #383234 14px
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 3%,
    black 97%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 3%,
    black 97%,
    transparent
  );
}

/* Revealer effects */

/* One layer effect (effect-1) */

.anim--effect-1 .page:first-child {
  background: #605bd4;
}

.anim--effect-1 .page:nth-child(2) {
  background: #ff6eae;
}

.anim--effect-1 .revealer--animate .revealer__layer {
  -webkit-animation: anim-effect-1 0.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
  animation: anim-effect-1 0.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@-webkit-keyframes anim-effect-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  49%,
  50% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}

@keyframes anim-effect-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  49%,
  50% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}

.sr-only {
  display: none;
}

footer {
  padding-bottom: 50vh;
}

#what-is-this {
  display: block;
  width: 210px;
  height: 0;
  overflow-y: scroll;
  text-transform: none;
  padding-right: 15px;
  background-color: #383234;
}

.cv-hero {
  padding-bottom: 1rem;
  /*background: linear-gradient(
    to bottom right,
    #fcf8ff,
    #e6f3fc 77.31%,
    #cae5fa
  );*/
}
.cv-hero .display-5 {
  font-weight: 300;
  letter-spacing: 0.03em;
}
.cv-hero .lead {
  font-weight: 300;
  color: #555;
}
.cv-hero p {
  max-width: 60ch;
}

.cv-features .border,
.cv-skills .border,
.cv-selected .border {
  border-color: #111;
  border-radius: 6px;
  background: #fff;
}

.cv-features .h6 {
  letter-spacing: 0.06em;
}

.cv-process .rounded-circle {
  font-family: "Barlow Condensed", helvetica, arial, sans;
  font-weight: 500;
  color: #444;
  line-height: 1;
  font-size: 1.7em;
}
.cv-process .small.text-muted {
  color: #6a6a6a !important;
}

.cv-selected .small.text-muted {
  color: #6a6a6a !important;
}
.cv-selected a {
  text-decoration: none;
}

.cv-timeline > ul {
  border-left: 2px solid #111 !important;
}

.cv-edu ul {
  margin-bottom: 0;
}

.cv-note .blur {
  color: #555;
}
.cv-note a {
  color: #111;
  border-bottom: 1px solid #111;
  text-decoration: none;
}
.cv-note a:hover,
.cv-note a:focus {
  color: #fff;
  background: #111;
}

@media (min-width: 992px) {
  .cv-hero p {
    max-width: 65ch;
  }
}

.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: 500;
  color: #4a4a4a;
  /*box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.27);*/
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border: 3px solid #4a4a4a;
}

.step1 {
  /*border: 1px dashed #4a4a4a;*/
  /*background-color: var(--bs-btn-bg);*/
  /*color: var(--bs-btn-color);*/
  /*background: linear-gradient(189deg, #fff8f1, #f8e6fc 0%, #c7e6ff);*/
}

.step2 {
  /*border: 3px dotted #4a4a4a;*/
  /*background-color: var(--bs-btn-bg);*/
  /*color: var(--bs-btn-color);*/
  /*background: linear-gradient(189deg, #fff8f1, #f8e6fc 30%, #c7e6ff);*/
}

.step3 {
  /*border: 3px solid #4a4a4a;*/
  /*background-color: var(--bs-btn-bg);*/
  /*color: var(--bs-btn-color);*/
  /*background: linear-gradient(189deg, #fff8f1, #f8e6fc 55%, #c7e6ff);*/
}

.step4 {
  /*border: 4px solid #4a4a4a;*/
  /*background-color: #4a4a4a;*/
  /*color: white;*/
  /*background: linear-gradient(189deg, #fff8f1, #f8e6fc 90.31%, #c7e6ff);*/
}

.gradient-card {
  display: block;
  /*color: #fff;*/
  /*linear-gradient(to bottom right, #7fab9d, #4b667a 61.76%, #003052);*/
  /*background-size: 160% 160%;*/
  border: 1px solid #e6f3fc;
  box-shadow:
    0 6px 24px rgba(17, 12, 46, 0.14),
    0 2px 8px rgba(17, 12, 46, 0.08);
  /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);*/
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-position 1.2s ease;
  will-change: transform, box-shadow, background-position;
  .btn {
    /*background: linear-gradient(175deg, #b4fcff, #b4fffd 66.39%, #a3ffe5);*/
  }
}

/* Subtle animated shift for a premium look */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.gradient-card {
  animation: gradientShift 18s ease-in-out infinite alternate;
}

/* Tweak internal text for readability and polish */
.gradient-card .fw-semibold {
  letter-spacing: 0.2px;
}
.gradient-card .small {
  opacity: 0.98;
}
.gradient-card .small strong {
  /*color: #fff;*/
  opacity: 1;
}

/* Case Study: Hero, Cards, Grid, Media, GIF Gallery */

/* Hero header for case studies */
main article > header {
  /*border: 1px solid #e6f3fc;*/
  /*border-radius: 14px;*/
  /*padding: 1.5rem;*/
  /*background: linear-gradient(180deg, #f9f1ff 0%, #e6f3fc 77.31%, #c7e6ff);*/
  /*box-shadow:
    0 10px 30px rgba(17, 12, 46, 0.08),
    0 2px 10px rgba(17, 12, 46, 0.06);*/
  position: relative;
  overflow: hidden;
}

main article > header h2 {
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}
main article > header .lead {
  color: #444;
}

/* Grid utility for arranging cards/media */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .cs-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Media frame for GIFs/videos/images */
.cs-media {
  --ratio: 16/9;
  position: relative;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #f8f8f8;
  overflow: hidden;
  aspect-ratio: var(--ratio);
  box-shadow: 0 6px 20px rgba(17, 12, 46, 0.08);
}
.cs-media > img,
.cs-media > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}

/* Figure + caption helpers */
.cs-figure {
  margin: 0;
}
.cs-figure .cs-caption {
  font-size: 0.9rem;
  color: #6a6a6a;
  margin-top: 0.5rem;
}

/* GIF gallery for ordered feature captures */
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.cs-gallery .cs-item {
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 6px 24px rgba(17, 12, 46, 0.06),
    0 2px 8px rgba(17, 12, 46, 0.04);
  overflow: hidden;
}
.cs-gallery .cs-item img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
.cs-gallery .label {
  padding: 8px 10px;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: #444;
}

/* Polished quotes inside articles */
article blockquote {
  margin: 0.75rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid #111;
  color: #444;
  font-style: italic;
}
article blockquote p {
  margin: 0.25rem 0;
}

/* Utilities */
.aspect-1x1 {
  aspect-ratio: 1/1;
}
.aspect-4x3 {
  aspect-ratio: 4/3;
}
.aspect-16x9 {
  aspect-ratio: 16/9;
}
.gif-smooth {
  image-rendering: auto;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gradient-card {
    animation: none;
  }
}

/* Key Solutions: two-column layout with text left and GIF right */
.cs-solutions {
  display: grid;
  gap: 1.25rem;
}

.cs-solution {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

.cs-solution + .cs-solution {
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .cs-solution {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
  .cs-solution.reverse {
    grid-template-columns: 1fr 1.15fr;
  }
}

.cs-solution-body {
  font-size: 1rem;
  color: #383234;
}

.cs-solution-body h4,
.cs-solution-body strong {
  font-weight: 600;
}

/* Media area for the right-hand GIF/image */
.cs-solution-media {
  position: relative;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(17, 12, 46, 0.08);
}

.cs-solution-media > img,
.cs-solution-media > video {
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  background: #fff;
}