/* Page body styles */
body {
    margin:0; /* Remove the default page margin */
	padding: 0;
	width: 100%;
}

/* General styles that apply to everything */
* {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height:1.5em;
}
a {
    color:#000000; /* Link color */
	text-decoration: none;
	padding: 1rem;
}

a:hover {
    color:#BC2020; /* Hovered link color */
}

.current  {
   color:#adadad;
	text-decoration: none;
	padding: 1rem;
}

/* Header */
.header {
    border-bottom:2px solid #000;
    background:#fff;
    padding-top: 1px;
	margin: 0;
    text-align:center;
	width:100%;
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
}

  
/* Dropdown Button */
.dropbtn {
  background-color: #ffffff;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  
}


/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #ffffff;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


.flex {
    display: flex;

}

.dropmenu {
    vertical-align: center;
    padding-top: 1%;
    padding-left: 1%;

}

.title {
	margin: 0;
    text-align:center;
    width:80%;
	padding-right: 10%;
}

.title h1 {
  margin-bottom: 1rem;
}

.title p {
  margin-top: 0;
  margin-bottom: 2rem;
}

.narrow {
    text-align:center;
    width: 100%;
	padding: 0px;
	margin: 0px;
	padding-top: 1px;   /* prevents margin collapse */
	
}

.narrow h2 {
  margin-bottom: 0.25rem;
}

.narrow p {
  margin-top: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.two {
  grid-column: 2 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.three {
  grid-column: 1 / 3;
  grid-row: 5 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.four {
  grid-column: 3 / 4;
  grid-row: 5 / 13;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 2%;
  margin-left: 1%;
}

.five {
  grid-column: 1 / 2;
  grid-row: 9 / 17;
   border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.six {
  grid-column: 2 / 3;
  grid-row: 9 / 13;
   border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.seven {
  grid-column: 2 / 4;
  grid-row: 13 / 17;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.eight {
  grid-column: 1 / 4;
  grid-row: 17 / 21;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.nine {
  grid-column: 1 / 2;
  grid-row: 21 / 25;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.ten {
  grid-column: 2 / 4;
  grid-row: 21 / 25;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.eleven {
  grid-column: 1 / 3;
  grid-row: 25 / 29;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.twelve {
  grid-column: 3 / 4;
  grid-row: 25 / 29;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirteen {
  grid-column: 1 / 2;
  grid-row: 29 / 33;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.fourteen {
  grid-column: 2 / 4;
  grid-row: 29 / 33;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.fifteen {
  grid-column: 1 / 4;
  grid-row: 33 / 37;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.wrapper2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}

.sixteen {
  grid-column: 1 / 2;
  grid-row: 1 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.sixteen2 {
  grid-column: 2 / 4;
  grid-row: 1 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.seventeen {
  grid-column: 2 / 4;
  grid-row: 5 / 13;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.eighteen {
  grid-column: 1 / 3;
  grid-row: 9 / 13;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.nineteen {
  grid-column: 3 / 4;
  grid-row: 9 / 17;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.twenty {
  grid-column: 1 / 2;
  grid-row: 13 / 17;
   border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.twentyone {
  grid-column: 2 / 3;
  grid-row: 13 / 17;
   border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.wrapper3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}

.twentytwo {
  grid-column: 1 / 3;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.twentythree {
  grid-column: 3 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.wrapper4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}

.twentyfour {
  grid-column: 1 / 2;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.twentyfive {
  grid-column: 2 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.wrapper5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}

.twentysix {
  grid-column: 1 / 3;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.twentyseven {
  grid-column: 3 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.wrapper6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}


.twentyeight {
  grid-column: 1 / 2;
  grid-row: 1 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.twentynine {
   grid-column: 2 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirty {
  grid-column: 2 / 4;
  grid-row: 5 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 0%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirtyone {
  grid-column: 1 / 3;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirtytwo {
  grid-column: 3 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.wrapper7 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}

.thirtythree {
  grid-column: 1 / 3;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirtyfour {
  grid-column: 3 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirtyfive {
  grid-column: 1 / 2;
  grid-row: 5 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirtysix {
  grid-column: 2 / 4;
  grid-row: 5 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.wrapper8 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  grid-auto-rows: minmax(1%, auto);
  margin-right: 1%;
  width: 100%;
}

.thirtyseven {
grid-column: 1 / 2;
  grid-row: 1 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirtyeight {
grid-column: 2 / 3;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.thirtnine {
grid-column: 3 / 4;
  grid-row: 1 / 5;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

.forty {
grid-column: 2 / 5;
  grid-row: 5 / 9;
  border-radius: 10px;
  padding: 0px;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
}

/* Home Content */
.home-content {
  border-radius: 10px;
  border: 2px solid #000000;
  padding: 0px;
  float: left;
  width: 100%;
    transition: transform .2s;

}

.home-content:hover {
  transform: scale(1.05); 

}

.H1 {
display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: -18px;
  margin-left: 0;
	padding-bottom: 0px;
  margin-right: 0;
  font-weight: bold;
}

.p {
display: block;
margin-top: 0px;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
	padding-top: 0;
}

/* Horizontal menu links used in the header and footer */
.menu {
    border-bottom:2px solid #000;
    background:#fff;
    padding:.5rem;
    text-align:center;
}

.home {
    display: block;
	text-align: center;
	align-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
	padding: 20px;
}

.category {
    display: block;
	text-align: center;
	align-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
	padding: 10px;
}

.spacer {
    position: absolute;
    width: 100%;
	height:55%;

}

.knife {
    position: absolute;
    left: 23%;
	right: 23%;
	top: 35%;
    width: 55%;
}

.knifebox {
    display: relative;
	text-align: center;
	align-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
	padding: 10px;
}

.content {
    display: block;
	text-align: center;
	align-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
	padding: 20px;

}

.content_left {
    display: block;
	text-align: left;
	align-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
	padding: 20px;
}

.hoverbrush{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(-12deg);
	transform-origin: 95% 50%;
	transition-duration: .25s;
}

.hoverhighlighter_seo{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(-16deg);
	transform-origin: 95% 50%;
	transition-duration: .25s;
}

.hovercolorpencil{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(-12deg);
	transform-origin: 95% 50%;
	transition-duration: .25s;
}

.hoverpencil{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(-16deg);
	transform-origin: 5% 50%;
	transition-duration: .25s;
}

.hovercrayon_ai{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(-20deg);
	transform-origin: 5% 50%;
	transition-duration: .25s;
}

.hovercrayon{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(20deg);
	transform-origin: 5% 50%;
	transition-duration: .25s;
}

.hoverpen{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(16deg);
	transform-origin: 95% 50%;
	transition-duration: .25s;
}

.hoversharpie{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(20deg);
	transform-origin: 95% 50%;
	transition-duration: .25s;
}

.hoverhighlighter{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */
  transform: rotate(16deg);
	transform-origin: 5% 50%;
	transition-duration: .25s;
}

.hovermonogram{
  /*
  This could be a change in opacity
  or whatever you would like it to be
  */

 color: blue;
  display:inline-block;
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.75s infinite;
  max-width: 100%;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}


.thumbnails {
  width: 20%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
  transition: transform .2s;
  min-width: 250px;
}

.thumbnails:hover {
  transform: scale(1.1); 
}

video {
  max-width: 100%;
  height: auto;
}
/* ============================= */
/* FIX: Hamburger stacking       */
/* ============================= */

#top {
  position: relative;
  z-index: 1000;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  z-index: 2000;
}

/* ============================= */
/* CASE STUDY STYLES             */
/* ============================= */

.grey-section {
  padding-bottom: 2rem;
  padding-top: 1px;
}

.nav-wrapper {
  position: sticky;
  top: 0;

  z-index: 900;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.pill {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid #000;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.pill:hover,
.pill.active {
  background: #000;
  color: #fff;
}

.expandable {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.expandable.open {
  display: block;
  margin-top: 3rem;
  opacity: 1;
  transform: translateY(0);
}

.expandable h3 {
  margin-top: 0;
}

.expandable img {
  width: 100%;
  height: auto;
  margin: 1.5rem 0;
  transition: transform 0.4s ease;
}

.expandable img:hover {
  transform: scale(1.02);
}

.link-right {
  text-align: right;
  margin-top: 0.5rem;
}

.close-wrap {
  text-align: center;
  margin-top: 2rem;
}

.close-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #000;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #000;
  color: #fff;
}

.case-footer {
  text-align: center;
  margin-top: 5rem;
}

.jam-header {
  padding: 1rem 20px;
}

.jam-header h2 {
  margin-top: 0;
}

.featured-work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 20px;

}

.work-tile {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: white;
  aspect-ratio: 4 / 3; /* keeps tiles balanced */
}

.work-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.work-tile:hover img {
  transform: scale(1.06);
}

.overlay {
  position: absolute;
  inset: 0;

  /* Stronger gradient for readability */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.65) 40%,
    rgba(0,0,0,0.3) 70%,
    rgba(0,0,0,0.1) 100%
  );

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  text-align: left;

  opacity: 0;
  transition: opacity 0.35s ease;
}

.work-tile:hover .overlay {
  opacity: 1;
}

.overlay h3 {
  font-size: 1.8rem;
  margin-bottom: .5rem;
  font-weight: 600;
}

.overlay p {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 500px;
}

/* ================================= */
/* FIX: Prevent red hover in tiles   */
/* ================================= */

.featured-work .work-tile {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 12px 30px rgba(0,0,0,0.06);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.featured-work .work-tile:hover {
  transform: translateY(-8px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06),
    0 24px 50px rgba(0,0,0,0.12);
  color: white;
}

.featured-work .work-tile:hover h3,
.featured-work .work-tile:hover p {
  color: white;
}

.page-body {
  background-color: #f5f5f5;
  padding: 1rem 0 6rem 0; 
}

/* Footer */
.footer {
    text-align:center;
	padding:.5rem;
    background:#fff;
	width:100%;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
	padding-top: 50px;
}