@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/ppneuemontreal-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/ppneuemontreal-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/ppneuemontreal-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/ppneuemontreal-thin.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/ppneuemontreal-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/ppneuemontreal-semibolditalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root{
  --ak-accent:#0f0f10;
  --ak-muted:#6c757d;
  --ak-border:#e6e6e6;
  --ak-bg:#fff;
  
  --font-primary: 'PP Neue Montreal', system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-thin: 200;
}
 
html,body{overflow-x: ;}
body{background:var(--ak-bg); font-family:var(--font-primary); font-weight:var(--font-weight-medium); line-height:1.6; font-size:1.375rem; font-size:calc(14.67px + 0.370vw); font-size:clamp(1.375rem;, calc(14.67px + 0.370vw), 20px);}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{font-weight:var(--font-weight-medium);letter-spacing:0;line-height:1.5;}
h1, .h1{font-size:6.125rem;font-size:calc(51.3275px + 5.18525vw);font-size:clamp(55px, 6.7vmax, 126px); line-height:1.1;} 
h2, .h2{font-size:4.8125rem;font-size:calc(42px + 3.8885vw);font-size:clamp(56px,42px + 3.8885vw,98px);}
h3, .h3 {font-size:2.125rem; font-size:calc(24px + 1.111vw); font-size:clamp(28px, calc(24px + 1.111vw), 40px);}
h4, .h4 {font-size:1.75rem; font-size:calc(21.33px + 0.741vw); font-size:clamp(24px, calc(21.33px + 0.741vw), 32px);}
h5, .h5 {font-size:1.375rem; font-size:calc(18.67px + 0.370vw); font-size:clamp(20px, calc(18.67px + 0.370vw), 24px);}
h6, .h6 {font-size:1.188rem; font-size:calc(17.33px + 0.185vw); font-size:clamp(18px, calc(17.33px + 0.185vw), 20px);}
a, a:hover, a:focus {color:black;}
.nav-link {color:black; text-decoration:underline!important;}
.nav-link:hover, .nav-link:focus {color:black; text-decoration:none!important;}
.lead {font-size:1.25rem; font-size:calc(16.67px + 0.370vw); font-size:clamp(18px, calc(16.67px + 0.370vw), 22px);}
.small {font-size:0.938rem; font-size:calc(13.33px + 0.185vw); font-size:clamp(14px, calc(13.33px + 0.185vw), 16px);} 
.brand-accent{color:#6f42c1}
.hero-illustration{max-height:420px}
.case-card{transition:transform .18s ease, box-shadow .18s ease}
.case-card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.08)}
.icon-list{list-style:none; padding-left:0}
.icon-list li{position:relative; padding-left:1.25rem; margin:.4rem 0}
.icon-list li::before{content:"•"; position:absolute; left:0; top:.1rem; opacity:.6}
.border{border-color:var(--ak-border)!important}
.bg-light-subtle{background:#f6f7f9}
.hero{scroll-margin-top:80px}


.navbar {position:sticky; top:0; z-index:99999;backdrop-filter:blur(8px); background: rgb(255 255 255 / 85%);}
/* Active nav styling */
.navbar .nav-link.active { 
  padding-inline:.75rem;
  position:relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:#6f42c1;
}

/* Clients carousel spacing */
#clientsCarousel img{filter: grayscale(100%); transition: filter .2s ease;}
#clientsCarousel img:hover{filter: grayscale(0%);}

@media (min-width: 992px){
  .hero { padding-top:5rem; padding-bottom:5rem;}
}


.scroller-x { position: relative; width: 100%; overflow: hidden; background:none; height: auto; display: flex; align-items: center; margin-bottom: 1rem; }
	.scroller-track { display: flex; white-space:  ; will-change: transform; transition:unset!important; gap:60px;}
	.scroller-track .bi { font-size: 75%; }
	.scroller-item { background-color:none; border-radius:5px; padding:0.5rem; /*margin-right:0.5rem;*/ display: inline-block; font-size: 1rem; font-weight: 500; flex: 0 0 auto; display:flex; flex-direction:;  max-width:200px; max-height:50px; text-align:left;}
	.scroller-item span {padding:2px;}
	.scroller-item .scroller-desc {padding-left:5px;}
	.scroller-fader::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: linear-gradient(to right, #fff 0%, transparent 30%, transparent 70%, #fff);}

.scroller-fader{position:relative}
.scroller-fader:before{content:"I've worked with amazing clients :)";position:absolute;left:0;right:0;top:30%;margin:0 auto;padding:10px;width:350px;height:75px;border:1px solid #888;text-align:center;z-index:999;background:rgb(255 255 255 / 80%);border-radius:10px;box-shadow:10px 10px 16px rgb(0 0 0 / 10%);font-size:75%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-10px) scale(0.95);transition:all .3s ease-out;pointer-events:none;backdrop-filter: blur(3px);}
.scroller-fader:hover:before{opacity:1;transform:translateY(0) scale(1)} 



.case-card {overflow:hidden;}
.case-card img {transform:scale(1); transition: all 0.3s ease-in-out;}
.case-card:hover img {transform:scale(1.05); }

.skills .badge{font-weight:500}
.skills i{opacity:.8}

aside li {margin:20px 0; display:flex; flex-direction:column;}





 

.full-bleed{
  position: relative;
  left: 49.999%;
  transform: translateX(-50%);
  min-height: 400px;
  overflow: hidden;
  background: #f0f0f0;
}
 

.full-bleed img {
  width: 100%; 
  height: auto;
  object-fit: cover;
}
 
@media (max-width: 1199.98px) {
.full-bleed {overflow-x: auto;}
.full-bleed img, .full-bleed svg { 
	display:block;height:auto;
	width: 100%;
	min-width: fit-content; 
	min-height: 350px;
	max-height:75%; max-height:75vh
	object-fit: contain;
  } 
} 
 
  
.full-bleed::-webkit-scrollbar {
  height: 15px; /* Force scrollbar height for Webkit browsers */
}

.full-bleed::-webkit-scrollbar-thumb {
  background: #0099ff;
  border-radius:50px;
} 

/* Alternative: If you want the image to maintain aspect ratio */
.full-bleed.aspect-ratio img {
  width: auto;
  height: auto;
  min-height: 400px;
  max-height: 80vh; /* Optional: limit max height */
}







/*override bootstrap garbage */
.btn-link{--bs-btn-color:#000;--bs-btn-hover-color:#111;font-weight:500;text-decoration:underline;letter-spacing:.01em; font-size:2.125rem; font-size:calc(24px + 1.111vw); font-size:clamp(28px, calc(24px + 1.111vw), 40px);}
.btn-link:hover{text-decoration:none;}