/* --- Fonts --- */
@font-face {
  font-family: "CabinetGrotesk";
  font-weight: 400;
  src: url(fonts/CabinetGrotesk-Regular.woff2);
}
@font-face {
  font-family: "CabinetGrotesk";
  font-weight: 900;
  src: url(fonts/CabinetGrotesk-Bold.woff2);
}

/* --- Base Styles --- */
body {
  max-width: 1800px;
  margin: 0 auto;
  background: #fff;
  font-family: "CabinetGrotesk";
  transition: background-color 0.3s, color 0.3s;
}
html { scroll-behavior: smooth; }
img { display: block; width: 100%; height: auto; margin: 0; overflow: hidden; }
section { padding: 120px 0; }
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  width: 100%; max-width: 1704px; margin: 0 auto; padding: 0 48px; position: relative;
}
.row { padding: 10px 0px 10px 0px; }

/* --- Navbar --- */
.navbar {
  margin: 16px 0 24px 0;
  position: sticky; top: 0; z-index: 1030;
  background: inherit;
  transition: background-color 0.3s, color 0.3s;
}
.navbar-brand { font-size: 24px; font-weight: 700; padding: 0; }
.navbar-toggler { border: none; font-size: 1.5rem; line-height: 1; }
.navbar-toggler:focus { box-shadow: none; }
.navbar .nav-link {
  display: inline-block; font-size: 24px; position: relative; color: #000 !important;
  transition: transform 0.3s, font-size 0.3s;
}
.navbar .nav-link.active { color: #000; }
.navbar .nav-link.active::after {
  content: ""; position: absolute; bottom: 4px; left: 10%; width: 80%; height: 2px;
  background: #0008BC; transform: scaleX(0); transform-origin: center;
  transition: transform 0.4s;
}
.navbar .nav-link.active.visible::after { transform: scaleX(1); }
.navbar-nav { margin-left: 200px; padding-left: 0; }
.nav-gap { margin-right: 80px; }
.brand-extra-text {
  opacity: 0; font-weight: 300; transform: translateX(10px);
  transition: opacity 0.4s, transform 0.4s; display: inline-block;
}
.navbar.stuck .brand-extra-text { opacity: 1; transform: translateX(0); }
.navbar.stuck .navbar-brand,
.navbar.stuck .nav-link,
.navbar.stuck #darkModeToggle {
  transform: scale(0.9); font-size: 94%;
}

.nav-crumb {
  text-align: right;
  padding-bottom: 56px;
}

/* --- Progress Bar --- */
.progress-container {
  position: fixed; width: 100%; height: 4px; background: #fff; top: 0; z-index: 1;
}
.progress-bar { height: 4px; background: #0008bc; width: 0%; top: 0; }

/* --- Buttons --- */
.btn { border-radius: 40px; margin-top: 16px; }
#darkModeToggle {
  box-shadow: none;
  transition: transform 0.3s, font-size 0.3s;
  z-index: 1100;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6, p, a, .large-link a {
  font-family: "CabinetGrotesk", sans-serif;
}
h1 { font-size: 40px; line-height: 110%; font-weight: 900; }
h2 { font-size: 32px; line-height: 110%; font-weight: 900; }
h3 { font-size: 24px; line-height: 110%; font-weight: 900; }
h4 { font-size: 20px; line-height: 110%; font-weight: 900; }
h5, h6 { color: #9d9d9d; line-height: 110%; font-weight: 200; }
h5 { font-size: 16px; }
h6 { font-size: 12px; }
p, a { font-size: 16px; font-weight: 400; }
a { font-weight: 700; color: #000; text-decoration: none; }
a:hover { color: #0008bc; }
.large-link a { font-size: 32px; font-weight: 700; color: #000; }

/* --- Layout & Spacing --- */
.intro-copy { padding-top: 48px; }
.introduction { padding: 120px 0; }
.thumbnail-info { padding-right: 200px; padding-top: 32px; }
.image-space { padding-bottom: 17px; }
.about-intro { padding-top: 180px; padding-bottom: 16px; }
.title { padding-bottom: 32px; }
.title-thumbnail { padding-bottom: 36px; }
.intro-gallery { padding-bottom: 156px; }
.social-links { padding-bottom: 16px; }
footer { padding: 120px 0; }
footer ul { padding: 0; margin: 0; }
footer li { list-style: none; }

/* --- Project Spaces --- */
.sprint-color { margin-top: 80px; padding-top: 80px; background: #f5f3e6; }
.pf-brand img { padding-bottom: 120px; }
.sr-black { background: #000; padding: 120px 0; }
.web-grey { background: #f6f6f6; padding: 120px 0; }
.sr-grey img { padding-bottom: 160px; }
.moto-anim { padding: 80px 0; }
.moto-anim h3, .moto-device { padding-bottom: 32px; }
.lancelot-hero-image-01, .lancelot-hero-image-02 {
  background-color: #ccc; height: 800px; background-position: center;
  background-repeat: no-repeat; background-size: cover; position: relative;
}
.lancelot-hero-image-01 { background-image: url("images/lancelot/Jumbo_Lancelot_01.jpg"); }
.lancelot-hero-image-02 { background-image: url("images/lancelot/Jumbo_Mobile_01.jpg"); }

/* --- Image Hover --- */
.img-hover-zoom { overflow: hidden; }
.img-hover-zoom img { transition: transform 0.25s; }
.img-hover-zoom:hover img { transform: scale(1.025); }

/* --- Reveal Animations --- */
.reveal-text, .reveal-video, .reveal-image {
  opacity: 0; transition: opacity 0.8s, transform 0.8s; will-change: opacity, transform;
}
.reveal-text, .reveal-video { transform: translateY(20px); }
.reveal-image { transform: translateX(-40px); transition: opacity 1.2s, transform 1.2s; }
.reveal-text.visible, .reveal-video.visible { opacity: 1; transform: translateY(0); }
.reveal-image.visible { opacity: 1; transform: translateX(0); }

/* --- Progession bar --- */
#progressContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 9999;
}

#myBar {
  height: 100%;
  width: 0%;
  background-color: #4caf50;
  transition: width 0.3s ease;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .introduction { padding: 120px 0; }
  .thumbnail-info { padding-right: 40px; }
}
@media (max-width: 992px) {
  section { padding: 40px 0; }
  .work-location { text-align: left; }
  .thumbnail-info { padding-bottom: 16px; }
  .thumbnail-space { padding-bottom: 40px; }
  .introduction { padding: 80px 0; }
  .sr-grey img { padding-bottom: 0; }
}
@media (max-width: 768px) {
  section, .introduction { padding: 40px 0; }
  header { padding-top: 40px; }
  .intro-copy { padding-left: 0; }
  .container { padding: 0 24px; }
  .thumbnail-info, .thumbnail-space { padding-bottom:8px; }
  .btn { margin-bottom: 40px; }
  .pf-brand img { padding-bottom: 16px; }
  .thumbnail-info { padding-bottom: 16px; }
  .navbar-toggler { padding: 0px;}
  .navbar-toggler-icon { width: 1.25rem; height: 1.25rem; color: #000;}
  .navbar-collapse { padding-top: 24px;}
  .nav-crumb { text-align: left; }
  .brand-extra-text { display: none;}
}

/* --- Dark Mode --- */
.dark-mode, .dark-mode .navbar, .dark-mode footer {
  background: #121212 !important; color: #fff !important;
}
.dark-mode .navbar .nav-link, .dark-mode a { color: #fff !important; }
.dark-mode .btn-outline-dark {
  border-color: #fff !important; color: #fff !important;
}
.dark-mode .btn-outline-dark:hover {
  background: #fff !important; color: #121212 !important;
}
.dark-mode a:hover, .dark-mode .nav-link:hover { color: #b926ef !important; }
.dark-mode #themeIcon { color: #fff; }
body.dark-mode { transition: background-color 0.3s, color 0.3s; }