/* Space Mono font family */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* Global font override */
* {
  font-family: "Space Mono", monospace !important;
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3,
.process-title, .cta-title-copy,
.hero-text, .skills-title-copy,
.button-text-copy, .navigation-text,
.display-2-copy, .display-2-copy-copy, .display-2-copy-copy-copy {
  font-family: "Space Mono", monospace !important;
}

/* Utility classes provided */
.space-mono-regular { font-family: "Space Mono", monospace; font-weight: 400; font-style: normal; }
.space-mono-bold { font-family: "Space Mono", monospace; font-weight: 700; font-style: normal; }
.space-mono-regular-italic { font-family: "Space Mono", monospace; font-weight: 400; font-style: italic; }
.space-mono-bold-italic { font-family: "Space Mono", monospace; font-weight: 700; font-style: italic; }

/* Typography tokens (unified) */
:root{
  --heading-xl: 48px;
  --heading-lg: 32px;
  --heading-md: 24px;
  --body-lg: 18px;
  --body: 16px;
}
.heading-xl{ font-size: var(--heading-xl); font-weight: 700; line-height: 1.1; }
.heading-lg{ font-size: var(--heading-lg); font-weight: 700; line-height: 1.15; }
.heading-md{ font-size: var(--heading-md); font-weight: 700; line-height: 1.2; }
.body-lg{ font-size: var(--body-lg); font-weight: 400; line-height: 1.6; }
.body{ font-size: var(--body); font-weight: 400; line-height: 1.5; }
.overline{ font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }

/* Map existing classes to unified tokens */
.display-1{ composes: heading-xl; }
.display-2, .display-2-copy, .display-2-copy-copy, .display-2-copy-copy-copy,
.process-title, .cta-title-copy{ composes: heading-lg; }
.display-3{ composes: heading-md; }
.hero-text{ composes: body-lg; }
.navigation-text, .button-text-copy{ composes: body; font-weight: 700; }
.text-block-22{ composes: overline; }

/* minimal local tweaks */
/* sticky menu hover: 10% white overlay with fully rounded corners */
.navigation-line-dark:hover .container-4 {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  transition: background-color 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
/* cards hover - zoom in on image */
.collection-block-copy{
  width: 100% !important;
}
/* Desktop: same row gap as tablet */
.work-list-copy{
  grid-row-gap: 24px !important;
}

/* My Work section background — inspired by OpenAI.fm */
.track{
  background-color: #e5e7eb; /* slightly darker than card for contrast */
  border-radius: 0;
  padding: 28px; /* breathing room around grid */
  overflow: hidden;
}

/* Remove any dark inner wrappers/backgrounds coming from the export */
.track .sticky-copy,
.track .wrapper,
.track .block-div,
.track .top-title,
.track .work-list-copy{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* My Work title in dark */
.track .display-3{
  color: #171717 !important;
}
.collection-block-copy .div-block-13{
  overflow: hidden;
  position: relative;
  width: 100%;
}
.collection-block-copy .image-10{ 
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(.18,.67,.34,1);
  will-change: transform;
}
.collection-block-copy:hover .image-10,
.collection-block-copy:focus-within .image-10,
.collection-block-copy:active .image-10{ 
  transform: scale(1.04) !important;
}

/* Work cards — OpenAI.fm-like card aesthetic */
.collection-block-copy{
  background-color: #f3f4f6; /* light neutral */
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  transition: box-shadow .25s cubic-bezier(.18,.67,.34,1), transform .25s cubic-bezier(.18,.67,.34,1);
}
.collection-block-copy:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 16px 28px rgba(0,0,0,0.09);
}
/* Ensure inner media respects rounding */
.collection-block-copy .div-block-13{ border-radius: 12px; overflow: hidden; }
.collection-block-copy .image-10{ border-radius: 12px; }
/* Content spacing inside card */
.collection-block-copy .div-block-8{ width: 100%; padding-top: 12px; }
/* Dark text in work cards (like OpenAI.fm) */
.collection-block-copy .text-block-22{
  color: #171717 !important; /* dark text */
}
.card-meta{
  margin-top: 6px;
  color: #6b7280; /* gray-500 */
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.collection-block-copy .display-2-copy-copy,
.collection-block-copy .display-2-copy-copy-copy{
  color: #171717 !important; /* dark text */
}
/* CTA button - OpenAI.fm style: gray default, orange on hover */
/* Backwards-compat: map legacy .button-5 to unified .cta-btn */
.button-5{ all: unset; }
.button-5{ display: inline-flex !important; }
.button-5{ /* inherit unified styles */ }
.button-5{ background-color:#4b5563 !important; color:#fff !important; border-radius:16px !important; padding:12px 22px !important; align-items:center; justify-content:center; position:relative; box-shadow: 0 10px 22px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.18); transition: background-color .25s cubic-bezier(.18,.67,.34,1), box-shadow .25s cubic-bezier(.18,.67,.34,1), transform .25s cubic-bezier(.18,.67,.34,1) !important; overflow:hidden; }
.button-5:hover{ background-color:#f64700 !important; color:#fff !important; box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.1), 0 16px 32px rgba(246,71,0,0.4), 0 2px 6px rgba(0,0,0,0.22); transform: translateY(-1px); }
.button-5 .gradient, .button-5 .gradient-glow{ display:none !important; }
.button-5 .button__text{ color:#fff !important; font-weight:700; letter-spacing:.2px; }

/* New reusable CTA component */
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 16px;
  background-color: #4b5563; /* gray */
  color: #fff;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.18);
  transform: translateY(0);
  transition: background-color .25s cubic-bezier(.18,.67,.34,1),
              box-shadow .25s cubic-bezier(.18,.67,.34,1),
              transform .25s cubic-bezier(.18,.67,.34,1),
              color .25s cubic-bezier(.18,.67,.34,1);
  position: relative;
  overflow: hidden; /* contain overlays */
}
.cta-btn:hover{
  background-color: #f64700; /* orange */
  color: #fff;
  transform: translateY(-1px);
  /* add subtle dark overlay on hover via big inset shadow (10%) */
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.1), 0 16px 32px rgba(246,71,0,0.4), 0 2px 6px rgba(0,0,0,0.22);
}
.cta-btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.2);
}
.cta-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(246,71,0,0.35), 0 8px 20px rgba(0,0,0,0.22);
}
.cta-btn.is-disabled{
  opacity: .55;
  pointer-events: none;
}
.cta-btn::before{ /* grain overlay */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18; /* subtle */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
.cta-btn::after{ /* bottom-to-top gradient darken */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.28), rgba(0,0,0,0) 65%);
}
.cta-btn__icon{
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: 0 0 14px;
  transition: transform .25s cubic-bezier(.18,.67,.34,1), filter .25s;
}
.cta-btn:hover .cta-btn__icon{
  transform: translateX(2px) scale(1.05);
}
.cta-btn__label{
  color: inherit;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Make the CTA button orange when its parent card is hovered */
.collection-block-copy:hover .cta-btn{
  background-color: #f64700 !important;
  color: #fff !important;
}
.button-5 .button__inner{ width: auto !important; padding: 0 !important; background: none !important; }
.button-5 .gradient, .button-5 .gradient-glow{ display: none !important; }
.button-5:hover{
  background-color: #f64700 !important; /* orange */
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(246,71,0,0.4), 0 2px 6px rgba(0,0,0,0.22);
  transform: translateY(-1px);
}
.button-5 .button__text{
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .2px;
}
.button-5:hover .gradient{
  opacity: 0 !important; /* hide gradient on hover */
}
@media (max-width: 991px){
  .collection-block-copy{
    width: 100% !important;
    max-width: 100% !important;
  }
  .collection-block-copy .div-block-13{
    width: 100% !important;
    max-width: 100% !important;
  }
  .collection-block-copy .div-block-13 > a,
  .collection-block-copy .div-block-13 > .w-inline-block,
  .collection-block-copy .div-block-13 > .link-block,
  .collection-block-copy .div-block-13 > .link-block-2{
    width: 100% !important;
    display: block !important;
  }
  .collection-block-copy .image-10{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  /* Keep 2 columns on tablet (768px - 991px) with same gap as desktop */
  .work-list-copy{
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 24px !important;
    grid-row-gap: 24px !important;
  }
}
@media (max-width: 767px){
  .collection-block-copy{
    width: 100% !important;
    max-width: 100% !important;
  }
  .collection-block-copy .div-block-13{
    width: 100% !important;
    max-width: 100% !important;
  }
  .collection-block-copy .image-10{
    width: 100% !important;
    max-width: 100% !important;
  }
  .work-list-copy{
    grid-template-columns: 1fr !important;
  }
}

/* fallback: show content when JS hasn't run yet */
html:not(.js-ready) .icon-wrapper{opacity:1; transform:none;}
html:not(.js-ready) .process-content{opacity:1;}
html:not(.js-ready) .process-overlay{transform:none;}
html:not(.js-ready) .process-line{opacity:1;}
.hero .page-margin{padding-top:0.01px;}

/* reveal animations */
.reveal{opacity:0 !important; transform: translateY(28px) !important; transition: opacity .7s cubic-bezier(.18,.67,.34,1), transform .7s cubic-bezier(.18,.67,.34,1); transition-delay: var(--d, 0s);}
.reveal.reveal--visible{opacity:1 !important; transform:none !important;}
.reveal.fade-up{transform: translateY(24px);} 
.reveal.fade-in{transform:none;}

/* About section - Apple-style gallery */
.about-content{
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}
.about-text-wrapper{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-text-block{
  margin-bottom: 0;
}
.about-text{
  color: var(--secondary-text, #999);
  font-family: "Funnel Text", "Funnel Sans", sans-serif !important;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 24px;
}
.about-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 180px;
  gap: 12px;
  margin: 0;
  align-content: start;
}
.gallery-item{
  overflow: hidden;
  border-radius: 8px;
  background: #222;
  position: relative;
}
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.18,.67,.34,1);
}
.gallery-item:hover img{
  transform: scale(1.05);
}
.gallery-item-large{
  grid-column: span 1;
  grid-row: span 2;
}
.gallery-item-tall{
  grid-row: span 2;
}
.gallery-item-wide{
  grid-column: span 2;
}
@media (max-width: 767px){
  .about-content{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-gallery{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 8px;
  }
  .gallery-item-large, .gallery-item-tall, .gallery-item-wide{
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* subtle parallax utility applied via JS */
.parallax-y{ will-change: transform; transform: translateY(8px); }

/* smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* force show sections that had Webflow interaction inline opacity */
.icon-wrapper{opacity:1 !important; transform:none !important;}
.process-content{opacity:1 !important;}
.process-overlay{transform:none !important;}
.process-line{opacity:1 !important;}
/* spacing safety */
.hero .page-margin{padding-top: 0.01px;}

/* reveal animations */
.reveal{opacity:0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease;}
.reveal.reveal--visible{opacity:1; transform:none;}
.reveal.fade-up{transform: translateY(24px);}
.reveal.fade-in{transform:none;}