/**
* Template Name: Style
* Template URL: https://bootstrapmade.com/style-bootstrap-portfolio-template/
* Updated: Jul 02 2025 with Bootstrap v5.3.7
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Schibsted Grotesk", system-ui, sans-serif;
  --nav-font: "Schibsted Grotesk", system-ui, sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #f6f7f5;
  /* Background color for the entire website, including individual sections */
  --default-color: #3a4756;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #12202f;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #0f6b6e;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #3a4756;
  /* The default color of the main navmenu links */
  --nav-hover-color: #0f6b6e;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #12202f;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #0f6b6e;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #b8c3cc;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ffffff;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #eef1ef;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #12202f;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #8fd0cc;
  --surface-color: #1d2f42;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* Reduced motion: respect prefers-reduced-motion by disabling animations/transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

/* Visible keyboard focus indicator */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  /* --background-color: rgba(255, 255, 255, 0); */
  color: white;
  background-color: #11427d;
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 32px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: whitesmoke;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu */
.mobile-nav-toggle {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  z-index: 1000;
  transition:
    background-color 0.3s,
    transform 0.3s;
}

.mobile-nav-toggle:hover {
  background-color: color-mix(in srgb, var(--accent-color), var(--contrast-color) 20%);
  color: var(--contrast-color);
}

.mobile-nav-toggle:focus-visible {
  outline: 3px solid var(--contrast-color);
  outline-offset: 3px;
}

/* Slide-in panel (mobile / tablet) */
.navmenu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -340px;
  z-index: 999;
  width: 320px;
  max-width: 86vw;
  overflow: hidden;
  visibility: hidden;
  background: linear-gradient(
    180deg,
    var(--nav-mobile-background-color) 0%,
    color-mix(in srgb, var(--nav-mobile-background-color), black 35%) 100%
  );
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  /* The panel slides out over 0.3s, but `visibility` is switched off only
     after the slide finishes so the content stays reachable while it
     animates away. */
  transition:
    right 0.3s ease,
    visibility 0s linear 0.3s;
}

.navmenu-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 22px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.navmenu-brand {
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.navmenu .logo {
  line-height: 1;
  justify-content: flex-start !important;
}

.navmenu .logo img {
  max-height: 36px;
  margin-right: 10px;
}

.navmenu .logo h1 {
  font-size: 21px;
  margin: 0;
  font-weight: 700;
  color: var(--contrast-color);
}

.navmenu-tagline {
  margin: 8px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.navmenu-social {
  margin: 0;
}

.navmenu-social a {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--contrast-color);
  margin: 0 4px;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  transition: 0.3s;
}

.navmenu-social a i {
  margin: 0;
}

.navmenu-social a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

.navmenu-list {
  display: block;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  flex: 1 1 auto;
}

.navmenu-list li {
  margin: 0;
}

.navmenu-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 2px;
  border-radius: 10px;
  font-family: var(--nav-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--nav-dropdown-color);
  white-space: nowrap;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.navmenu-list a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
  transition: 0.3s;
}

.navmenu-list a:hover,
.navmenu-list a:focus-visible {
  color: var(--contrast-color);
  background: rgba(255, 255, 255, 0.08);
}

.navmenu-list a:focus-visible {
  outline: 2px solid var(--contrast-color);
  outline-offset: -2px;
}

.navmenu-list a.active {
  color: var(--contrast-color);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.navmenu-list a.active::before {
  width: 8px;
  height: 8px;
  opacity: 1;
  background: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

.navmenu-actions {
  padding-top: 18px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.navmenu-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--nav-font);
  font-size: 16px;
  font-weight: 600;
  transition:
    background-color 0.3s,
    transform 0.3s;
}

.navmenu-contact:hover,
.navmenu-contact:focus-visible {
  background-color: color-mix(in srgb, var(--accent-color), var(--contrast-color) 22%);
  color: var(--contrast-color);
}

.navmenu-contact:focus-visible {
  outline: 2px solid var(--contrast-color);
  outline-offset: 3px;
}

.navmenu-contact i {
  font-size: 16px;
}

.navmenu-actions .navmenu-social {
  margin-top: 16px;
}

/* Links and buttons inside the panel must not animate the inherited
   `visibility` change. The panel hides itself with `visibility`, and a
   transitioned `visibility` keeps the links unfocusable until the animation
   ends, which breaks the focus handoff when the menu opens. Declaring the
   animated properties explicitly drops `visibility` from the list while
   keeping the existing colour/background/transform transitions. */
.navmenu a,
.navmenu button {
  transition-property:
    color,
    background-color,
    border-color,
    box-shadow,
    opacity,
    transform;
}

.mobile-nav-active {
  overflow: hidden;
}

/* When the panel is open the close button moves over to its left edge.
   The panel is min(320px, 86vw) wide, so the offset has to follow that
   calculation instead of assuming a fixed 320px. */
.mobile-nav-active .mobile-nav-toggle {
  right: calc(min(320px, 86vw) + 20px);
}

@media (max-width: 385.98px) {
  .mobile-nav-active .mobile-nav-toggle {
    /* Not enough room beside the panel - keep the close button on screen
       and let it sit over the top-right corner of the open panel. */
    right: 12px;
  }
}

.mobile-nav-active .navmenu {
  right: 0;
  visibility: visible;
  /* When opening, `visibility` must flip straight away so the panel can
     receive keyboard focus immediately. The 0.3s slide still applies. */
  transition:
    right 0.3s ease,
    visibility 0s linear 0s;
}

/* Backdrop behind the open mobile panel */
.navmenu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background-color: rgba(9, 22, 38, 0.55);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

body.mobile-nav-active .navmenu-backdrop {
  opacity: 1;
  visibility: visible;
}

/*--------------------------------------------------------------
# Navigation no-JS fallback
--------------------------------------------------------------*/
/* Without JavaScript the panel cannot slide, so it is laid out as a
   horizontal bar directly beneath the header and the toggle is hidden. */
html:not(.js) .navmenu {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  visibility: visible;
  overflow: visible;
  background-color: var(--nav-mobile-background-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

html:not(.js) .navmenu-inner {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: auto;
  padding: 10px 20px;
  overflow: visible;
}

html:not(.js) .navmenu-brand,
html:not(.js) .navmenu-actions {
  display: none;
}

html:not(.js) .navmenu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  flex: 1 1 auto;
}

html:not(.js) .navmenu-list a {
  width: auto;
  padding: 8px 12px;
  font-size: 15px;
}

html:not(.js) .mobile-nav-toggle {
  display: none !important;
}

/*--------------------------------------------------------------
# Navigation reduced motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .navmenu,
  .navmenu-backdrop,
  .mobile-nav-toggle,
  .navmenu-list a,
  .navmenu-contact {
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .footer-links {
  margin-top: 20px;
}

.footer .footer-links a {
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  text-decoration: none;
  font-weight: 500;
  margin: 0 12px;
  transition: 0.3s;
}

.footer .footer-links a:hover {
  color: var(--accent-color);
}

.footer .social-links {
  margin-top: 20px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin: 0 5px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer .credits {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}

.page-title h1 {
  font-size: 24px;
  font-weight: 700;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  overflow: clip;
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details {
  --section-spacing: 2.5rem;
}

.portfolio-details .portfolio-details-media {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image {
  margin-bottom: 1rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-wrapper {
  height: auto !important;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-slide img {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev {
  background-color: var(--contrast-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:after {
  font-size: 16px;
  color: var(--accent-color);
  font-weight: bold;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover:after {
  color: var(--contrast-color);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img {
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-details-media .tech-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.portfolio-details .portfolio-details-media .tech-stack-badges span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 85%);
  color: var(--heading-color);
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-media .tech-stack-badges span:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 70%);
  transform: translateY(-2px);
}

.portfolio-details .portfolio-details-content {
  padding: 0 0 0 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio-details .portfolio-details-content .project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .badge-wrapper .project-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
}

.portfolio-details .portfolio-details-content .project-meta .date-client {
  display: flex;
  gap: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item i {
  margin-right: 6px;
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-title {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.portfolio-details .portfolio-details-content .project-website {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-website i {
  font-size: 22px;
  color: var(--accent-color);
  margin-right: 8px;
}

.portfolio-details .portfolio-details-content .project-website a {
  font-weight: 500;
  transition: all 0.3s;
}

.portfolio-details .portfolio-details-content .project-website a:hover {
  letter-spacing: 0.5px;
}

.portfolio-details .portfolio-details-content .project-overview {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-overview .lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item {
  border: none;
  background: none;
  margin-bottom: 10px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button {
  padding: 1rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading-color);
  background-color: color-mix(in srgb, var(--surface-color), transparent 70%);
  border-radius: 8px !important;
  box-shadow: none;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--surface-color);
  color: var(--accent-color);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) i {
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button::after {
  background-size: 14px;
  width: 14px;
  height: 14px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button i {
  font-size: 1.1rem;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body {
  padding: 1rem;
  background-color: var(--surface-color);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.6;
}

.portfolio-details .portfolio-details-content .project-features {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-features h3 {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
}

.portfolio-details .portfolio-details-content .project-features h3 i {
  margin-right: 10px;
  color: var(--accent-color);
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .project-features .feature-list {
  list-style: none;
  padding-left: 0;
}

.portfolio-details .portfolio-details-content .project-features .feature-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.portfolio-details .portfolio-details-content .project-features .feature-list li i {
  color: var(--accent-color);
  margin-right: 10px;
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project {
  padding: 12px 28px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project {
  padding: 12px 28px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 90%);
  color: var(--heading-color);
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project i {
  transition: transform 0.3s ease;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 80%);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover i {
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .portfolio-details .portfolio-details-content {
    padding-left: 1rem;
  }
}

@media (max-width: 991.98px) {
  .portfolio-details .portfolio-details-content {
    padding: 2rem 0 0 0;
  }

  .portfolio-details .portfolio-details-content .cta-buttons {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .portfolio-details .project-meta {
    flex-direction: column;
    gap: 1rem;
  }

  .portfolio-details .project-meta .date-client {
    flex-direction: column;
    gap: 0.5rem;
  }

  .portfolio-details .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .portfolio-details .cta-buttons a {
    width: 100%;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-hero {
  position: relative;
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
}

.service-details .service-hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.service-details .service-hero .service-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
}

.service-details .service-content .service-header {
  margin-bottom: 40px;
}

.service-details .service-content .service-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.service-details .service-content .service-header .service-intro {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .service-content h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  color: var(--heading-color);
}

.service-details .service-features {
  margin-bottom: 50px;
}

.service-details .service-features .feature-item {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background: var(--surface-color);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.service-details .service-features .feature-item:hover {
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 90%);
  transform: translateY(-2px);
}

.service-details .service-features .feature-item .feature-icon {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.service-details .service-features .feature-item .feature-icon i {
  font-size: 24px;
  color: var(--accent-color);
}

.service-details .service-features .feature-item .feature-content h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.service-details .service-features .feature-item .feature-content p {
  font-size: 14px;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.service-details .service-process {
  margin-bottom: 50px;
}

.service-details .service-process .process-steps .process-step {
  display: flex;
  margin-bottom: 30px;
  position: relative;
}

.service-details .service-process .process-steps .process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 60px;
  width: 2px;
  height: 40px;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.service-details .service-process .process-steps .process-step .step-number {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 25px;
  flex-shrink: 0;
  font-size: 16px;
}

.service-details .service-process .process-steps .process-step .step-content h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--heading-color);
}

.service-details .service-process .process-steps .process-step .step-content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .service-gallery {
  margin-bottom: 30px;
}

.service-details .service-gallery img {
  transition: transform 0.3s ease;
}

.service-details .service-gallery img:hover {
  transform: scale(1.05);
}

.service-details .service-sidebar .service-menu {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .service-menu h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--heading-color);
}

.service-details .service-sidebar .service-menu .menu-list .menu-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item:hover,
.service-details .service-sidebar .service-menu .menu-list .menu-item.active {
  color: var(--accent-color);
  padding-left: 10px;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item:hover i,
.service-details .service-sidebar .service-menu .menu-list .menu-item.active i {
  color: var(--accent-color);
}

.service-details .service-sidebar .service-menu .menu-list .menu-item i {
  margin-right: 12px;
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: color 0.3s ease;
}

.service-details .service-sidebar .service-menu .menu-list .menu-item span {
  font-weight: 500;
}

.service-details .service-sidebar .service-info {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .service-info h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--heading-color);
}

.service-details .service-sidebar .service-info .info-list .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .service-info .info-list .info-item:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .service-info .info-list .info-item .info-label {
  font-weight: 500;
  color: var(--default-color);
}

.service-details .service-sidebar .service-info .info-list .info-item .info-value {
  font-weight: 600;
  color: var(--accent-color);
}

.service-details .service-sidebar .contact-card {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 20%));
  padding: 30px;
  border-radius: 10px;
  color: var(--contrast-color);
}

.service-details .service-sidebar .contact-card .contact-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

.service-details .service-sidebar .contact-card .contact-content p {
  margin-bottom: 20px;
  opacity: 0.9;
  font-size: 14px;
  line-height: 1.6;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info {
  margin-bottom: 25px;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info .contact-item i {
  margin-right: 10px;
  opacity: 0.8;
}

.service-details .service-sidebar .contact-card .contact-content .contact-info .contact-item span {
  font-size: 14px;
}

.service-details .service-sidebar .contact-card .contact-content .btn {
  background: var(--contrast-color);
  color: var(--accent-color);
  border: none;
  padding: 12px 25px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .contact-card .contact-content .btn:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 10%);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .service-details .service-hero img {
    height: 250px;
  }

  .service-details .service-hero .service-badge {
    top: 15px;
    right: 15px;
    padding: 6px 15px;
    font-size: 12px;
  }

  .service-details .service-content .service-header h2 {
    font-size: 24px;
  }

  .service-details .feature-item {
    padding: 15px !important;
  }

  .service-details .feature-item .feature-icon {
    width: 50px !important;
    height: 50px !important;
    margin-right: 15px !important;
  }

  .service-details .feature-item .feature-icon i {
    font-size: 20px !important;
  }

  .service-details .service-sidebar {
    margin-top: 30px;
  }

}

/*--------------------------------------------------------------
# Redesign layer (2026)
# Calm, CV-like presentation for remote hiring managers:
# ink text on a cool paper ground, one spruce accent, one typeface.
--------------------------------------------------------------*/
:root {
  --paper: #f6f7f5;
  --paper-alt: #eef1ef;
  --surface: #ffffff;
  --ink: #12202f;
  --slate: #566372;
  --rule: #dce1e2;
  --spruce: #0f6b6e;
  --spruce-deep: #0a5053;
  --spruce-soft: #e2efee;
  --on-dark: #c9d2da;
  --on-dark-muted: #8fa0b0;
  --on-dark-accent: #5fbdb7;
  --header-h: 72px;
}

html {
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

section[id],
.case-study[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.container {
  max-width: 1200px;
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1001;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

/* Header ------------------------------------------------------*/
.header {
  height: var(--header-h);
  padding: 0;
  color: var(--ink);
  background-color: color-mix(in srgb, var(--paper), transparent 8%);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.scrolled .header,
.header.has-rule {
  border-bottom-color: var(--rule);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}

.header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.header .logo img {
  max-height: 28px;
  margin: 0;
}

.sitename {
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.header .sitename {
  color: var(--ink);
}

.navmenu .sitename {
  color: #fff;
}

.header-nav {
  display: none;
  gap: 4px;
  margin-left: auto;
}

.header-nav a {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--slate);
  font-size: 15px;
  font-weight: 500;
}

.header-nav a:hover {
  color: var(--ink);
  background: var(--paper-alt);
}

.header-nav a.active {
  color: var(--ink);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--spruce);
}

.header-cv {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.header-cv:hover {
  background: var(--spruce-deep);
  color: #fff;
}

@media (min-width: 1024px) {
  .header-nav,
  .header-cv {
    display: flex;
  }

  /* The inline nav replaces the slide-in panel on wide screens. */
  .mobile-nav-toggle {
    display: none !important;
  }
}

.mobile-nav-toggle {
  top: 13px;
  right: 16px;
  width: 46px;
  height: 46px;
  font-size: 24px;
  border-radius: 8px;
  color: #fff;
  background-color: var(--ink);
}

.mobile-nav-toggle:hover {
  background-color: var(--spruce-deep);
}

.mobile-nav-toggle:focus-visible {
  outline: 3px solid var(--spruce);
}

.navmenu {
  background: var(--ink);
}

.navmenu-tagline {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

.navmenu-contact,
.navmenu-social a {
  border-radius: 8px;
}

/* Buttons -----------------------------------------------------*/
.btn-solid,
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-solid {
  background: var(--spruce);
  color: #fff;
  border: 1px solid var(--spruce);
}

.btn-solid:hover {
  background: var(--spruce-deep);
  border-color: var(--spruce-deep);
  color: #fff;
}

.btn-line {
  background: transparent;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 75%);
}

.btn-line:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Intro -------------------------------------------------------*/
.intro {
  padding: calc(var(--header-h) + 72px) 0 56px;
  background: var(--paper);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .intro-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 72px;
  }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--spruce-soft);
  color: var(--spruce-deep);
  font-size: 14px;
  font-weight: 600;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d61;
  box-shadow: 0 0 0 3px color-mix(in srgb, #1f9d61, transparent 75%);
}

.intro-name {
  margin: 0 0 16px;
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.intro-role {
  max-width: 30ch;
  margin: 0 0 20px;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.intro-lead {
  max-width: 60ch;
  margin: 0 0 32px;
  color: var(--slate);
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.intro-photo {
  margin: 0;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

.intro-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 40% 30%;
  border-radius: 12px;
  background: var(--paper-alt);
}

@media (max-width: 991.98px) {
  .intro {
    padding-top: calc(var(--header-h) + 40px);
  }

  .intro-photo {
    order: -1;
    justify-self: start;
    max-width: 120px;
  }

  .intro-photo img {
    aspect-ratio: 1;
    border-radius: 50%;
  }
}

.intro-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .intro-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

.intro-facts dt {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.intro-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* Time zone overlap ------------------------------------------*/
.overlap {
  padding: 56px 0;
  background: var(--ink);
  color: var(--on-dark);
}

.overlap-head {
  display: grid;
  gap: 12px;
  margin-bottom: 32px;
}

@media (min-width: 992px) {
  .overlap-head {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 72px;
    align-items: end;
  }
}

.overlap h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.overlap-summary {
  max-width: 62ch;
  margin: 0;
}

.overlap-summary strong {
  color: #fff;
}

.overlap-chart {
  display: grid;
  gap: 2px;
}

.overlap-chart[hidden] {
  display: none;
}

.overlap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px 0;
}

@media (min-width: 768px) {
  .overlap-row {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 5px 0;
  }
}

.overlap-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.overlap-label b {
  font-weight: 600;
  color: #fff;
}

.overlap-label time {
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-muted);
}

.overlap-track {
  position: relative;
  height: 28px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.07) 0,
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px,
      transparent calc(100% / 24)
    ),
    rgba(255, 255, 255, 0.04);
}

.overlap-seg {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}

.overlap-seg.is-shared {
  background: var(--on-dark-accent);
}

.overlap-row.is-home .overlap-seg {
  background: #fff;
}

.overlap-now {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: #f2b84b;
}

.overlap-axis-row {
  padding-top: 4px;
}

.overlap-axis {
  position: relative;
  height: 18px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-muted);
}

.overlap-axis span {
  position: absolute;
  white-space: nowrap;
  transform: translateX(-50%);
}

.overlap-axis span:first-child {
  transform: none;
}

.overlap-axis span:last-child {
  transform: translateX(-100%);
}

.overlap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.overlap-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overlap-legend i {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 3px;
}

.overlap-legend .is-now {
  width: 3px;
  height: 14px;
  background: #f2b84b;
}

@media (max-width: 767.98px) {
  .overlap-axis-row .overlap-label {
    display: none;
  }
}

/* Generic bands and the left-rail layout -----------------------*/
.band {
  padding: 96px 0;
  background: var(--paper);
}

.band-alt {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 767.98px) {
  .band {
    padding: 64px 0;
  }
}

.band h2,
.closing h2 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 992px) {
  .rail {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 72px;
  }

  .rail-head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
  }
}

.rail-head p {
  max-width: 40ch;
  margin: 0;
  color: var(--slate);
}

/* Experience timeline -----------------------------------------*/
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}

.timeline-item:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 768px) {
  .timeline-item {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 32px;
  }
}

.timeline-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
}

.timeline-date {
  font-variant-numeric: tabular-nums;
  color: var(--slate);
}

.timeline-org {
  font-weight: 700;
  color: var(--ink);
}

.timeline-place {
  color: var(--slate);
}

.timeline-body h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.timeline-body ul {
  margin: 0;
  padding-left: 18px;
}

.timeline-body li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.timeline-body li::marker {
  color: var(--spruce);
}

.timeline-body strong {
  font-weight: 700;
  color: var(--ink);
}

/* Selected work -----------------------------------------------*/
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.work-head p {
  max-width: 56ch;
  margin: 0;
  color: var(--slate);
}

.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 24px;
}

@media (min-width: 640px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
  }
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.work-card-media {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-alt);
}

.work-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.3s ease;
}

.work-card:hover .work-card-media img {
  transform: scale(1.03);
}

.work-card-body {
  padding-top: 18px;
}

.work-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--slate);
}

.work-card h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.work-card h3 a {
  color: var(--ink);
}

/* The title link covers the whole card. */
.work-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.work-card:hover h3 a {
  color: var(--spruce);
}

.work-card h3 a:focus-visible {
  outline: none;
}

.work-card:has(h3 a:focus-visible) {
  outline: 3px solid var(--spruce);
  outline-offset: 6px;
  border-radius: 10px;
}

.work-card-body > p:not(.work-card-meta) {
  margin: 0 0 14px;
  font-size: 15.5px;
  color: var(--slate);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--spruce-soft);
  color: var(--spruce-deep);
  font-size: 13px;
  font-weight: 500;
}

/* Skills ------------------------------------------------------*/
.skill-table {
  margin: 0;
}

.skill-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

.skill-table > div:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 768px) {
  .skill-table > div {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 32px;
  }
}

.skill-table dt {
  font-weight: 700;
  color: var(--ink);
}

.skill-table dd {
  margin: 0;
}

.credentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 48px;
  padding: 28px;
  border-radius: 10px;
  background: var(--paper-alt);
}

@media (min-width: 768px) {
  .credentials {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 40px;
  }
}

.credentials h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.credentials p,
.credentials ul {
  margin: 0;
  font-size: 15.5px;
}

.credentials ul {
  padding-left: 18px;
}

.credentials li {
  margin-bottom: 4px;
}

.credentials strong {
  color: var(--ink);
}

/* Ventures ----------------------------------------------------*/
.venture-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.venture {
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}

.venture:first-child {
  padding-top: 0;
  border-top: 0;
}

.venture h3 {
  margin: 0 0 2px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.venture-role {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--slate);
}

.venture p:not(.venture-role) {
  max-width: 62ch;
  margin: 0 0 10px;
}

.venture a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--spruce);
}

.venture a i {
  font-size: 13px;
}

.venture a:hover {
  color: var(--spruce-deep);
  text-decoration: underline;
}

/* Closing contact --------------------------------------------*/
.closing {
  padding: 96px 0;
  background: var(--ink);
  color: var(--on-dark);
}

.closing h2 {
  max-width: 20ch;
  color: #fff;
}

.closing p {
  max-width: 52ch;
  margin: 0 0 28px;
}

.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}

@media (min-width: 992px) {
  .closing-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 72px;
  }
}

.closing-email {
  display: inline-block;
  font-size: clamp(1.25rem, 3.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: anywhere;
  border-bottom: 2px solid var(--on-dark-accent);
}

.closing-email:hover {
  color: var(--on-dark-accent);
}

.closing-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.closing-links li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.closing-links li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.closing-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-weight: 600;
  color: #fff;
}

.closing-links a:hover {
  color: var(--on-dark-accent);
}

.closing a:focus-visible,
.footer a:focus-visible {
  outline-color: var(--on-dark-accent);
}

/* Footer ------------------------------------------------------*/
.footer {
  padding: 24px 0;
  background: var(--ink);
  color: var(--on-dark-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-bar p {
  margin: 0;
}

.footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}

.footer .footer-links a {
  margin: 0;
  color: var(--on-dark);
}

.footer .social-links {
  display: flex;
  gap: 8px;
  margin: 0;
}

.footer .social-links a {
  margin: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--on-dark);
}

.footer .footer-links a:hover,
.footer .social-links a:hover {
  color: #fff;
  border-color: #fff;
}

.scroll-top {
  border-radius: 8px;
  background-color: var(--ink);
}

/* Inner pages: page title and case studies -----------------------*/
.page-title {
  padding: calc(var(--header-h) + 40px) 0 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.page-title h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* The page title sits inside the first section; drop that section's own top padding. */
.section:has(> .page-title) {
  padding-top: 0;
}

.case-study + .case-study {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--rule);
}