/* ---------- RESET ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #fff;
  font-family: "Afacad", system-ui, sans-serif;
}

/* ---------- CONTAINER ---------- */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- NAV ---------- */

.site-header {
  position: sticky;           /* stick to the top while scrolling */
  top: 0;
  z-index: 100;               /* stay above everything else */
  padding: 6px 0;            /* you can tweak this */

  /* glassy / blurry background */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 42px;
}

.header-center ul {
  display: flex;
  gap: 40px;
  list-style: none;
}

.header-center a {
  text-decoration: none;
  color: #f5f5f5;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}
.header-center a:hover {
  color: #f97316;         /* your orange */
  transform: translateY(-2px);
  opacity: 1;
}



.social-icons {
  display: flex;
  gap: 16px;
}

.social-icons a {
  color: #ffffff;
  font-size: 26px;
  transition: color 0.2s ease, transform 0.2s ease;
  opacity: 0.5;
}

.social-icons a:hover {
  color: #f97316;
  /*transform: translateY(-3px);*/
}







/* ---------- HERO ---------- */

.hero {
  padding: 90px 0;
  position: relative;      /* <-- allows absolute children */
  overflow: visible;       /* make sure glow isn’t clipped */
}


.hero-text {
  margin-top: -150px;   /* nudge upward — adjust as needed */
}


.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}

.hero-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 1000px;          /* adjust until it matches Figma */
  pointer-events: none;  /* mouse ignores it */
  z-index: 0;
  transform: translate(25%, -50%);  /* pushes it further off-screen */
  opacity: 0.9;          /* adjust if needed */
}


.role {
  font-size: 20px;
  letter-spacing: 0.15em;
  font-weight: 700;
  padding-left: 5px;

}

h1 {
  font-size: 80px;
  line-height: .9;
  margin: 12px 0 20px;
}

.hero-title {
  font-family: "Vibes", system-ui, sans-serif;
  font-size: 130px;     /* adjust until it matches your Figma */
  line-height: 0.9;
  font-weight: 400;
}


.highlight {
  color: #f97316;
}

.subtitle {
  font-size: 16px;
  max-width: 420px;
  opacity: .85;
  margin-bottom: 18px;
}

.current-role {
  font-size: 16px;
  opacity: .8;
}

.hero-illustration {
  display: flex;
  justify-content: center;     /* center horizontally in its column */
  align-items: center;         /* center vertically */
  position: relative;
}

.hero-illustration::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 75%;                     /* right under feet — tweak if needed */
  width: 95px;                  /* small + narrow */
  height: 22px;
  background: radial-gradient(
    ellipse,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.05) 55%,
    rgba(255,255,255,0) 80%
  );
  transform: translateX(-500%);
  transform: translateY(350%);
  filter: blur(6px);            /* subtle blur — not glowing */
  opacity: 0.9;
  z-index: 0;
}


.hero-illustration img {
  width: 200px;
  height: auto;
  transform: translate3d(0, -300px, 0);   /* base position */
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ---------- SELECTED WORKS ---------- */

.selected-works {
  padding: 25px 0 80px;
}

.selected-works .container {
  position: relative; /* so the star can be absolutely positioned inside */
}

.section-title {
  font-family: "Vibes", system-ui, sans-serif;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f97316;
  margin-bottom: 48px;
}

/* star behind the glass cards */
.star-bg {
  position: absolute;
  left: 10%;   /* tweak this to match your Figma */
  top: 20%;
  width: 700px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.work-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  padding: 32px 40px;
  margin-bottom: 36px;
  border-radius: 36px;
  overflow: hidden;

  /* glass effect */
  background: rgba(255, 255, 255, 0.051);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);

  z-index: 1; /* above star */
}

/* content above the blur */
.work-card > * {
  position: relative;
  z-index: 2;
}
.work-card {
  /* ...everything you already have ... */
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.95);
}


.mockup-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mockup-labels {
  display: flex;
  justify-content: space-between;
  width: 70%;        /* controls spread — tweak */
  margin-top: 10px;  /* gap from image */
}

.mockup-labels span {
  font-size: 12px;
  opacity: 0.65;
  letter-spacing: 0.06em;
}

/* extra control if you want more separation */
.label-old {
  margin-right: 20px;
}

.label-new {
  margin-left: 16px;
}



.work-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.work-title {
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.work-description {
  font-size: 14px;
  max-width: 420px;
  opacity: 0.9;
}

/* tags / pills */
.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 24px;
}

.tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.7;
}



/* explore button */
.work-button {
  align-self: flex-start;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid #f97316;
  background: transparent;
  color: #f97316;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;

  text-decoration: none;      /* ← removes underline */
  display: inline-block;      /* ← makes it behave like a button */
}


.work-button:hover {
  background: #f97316;
  color: #000;
  transform: translateY(-1px);
}

/* right-side image */
.work-media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.work-media img {
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- GRAPHIC POSTERS GRID ---------- */

.graphic-posters {
  padding: 60px 0 100px;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);     /* 4 columns on wide screens */
  gap: 10px;
}

/* each card is a fixed frame, poster scales inside */
.poster-card {
  position: relative;
  cursor: pointer;
  border-radius: 0px;
  background: rgba(16, 16, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.poster-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;   /* keep grid tidy */
  overflow: hidden;      /* crop cleanly */
}

.poster-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills frame, no white gaps */
  display: block;
}


/* hover overlay with title */
.poster-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.0)
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}

.poster-title {
  font-size: 14px;
  letter-spacing: 0.12em;
  
  color: #f97316;
}

/* hover effects */
.poster-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
  border-color: rgba(249, 115, 22, 0.7);
}

.poster-card:hover .poster-overlay {
  opacity: 1;
}

/* simple responsive tweak: fewer columns on small screens */
@media (max-width: 1024px) {
  .poster-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .poster-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .poster-grid {
    grid-template-columns: 1fr;
  }
}



/* ---------- FOOTER ---------- */

.footer {
  padding: 140px 0 0;
  text-align: center;
}

.footer-inner {
  max-width: none;
  margin: 0 auto;
}

.footer-title {
  font-family: "Vibes", system-ui, sans-serif;
  font-size: 140px;
  line-height: 0.9;
  color: #f97316;
  margin-bottom: 24px;
}

.footer-email a {
  font-size: 20px;
  color: #f5f5f5;
  text-decoration: none;
  opacity: 0.85;
}

.footer-email a:hover {
  opacity: 1;
}





/* ---------- PROJECT PAGE (PORTFOLIO REDESIGN) ---------- */

.project-page {
  position: relative;
}

/* big orange glow on top-left */
.project-glow-left {
  position: absolute;
  top: -300px;
  left: -240px;
  width: 780px;          /* tweak until it matches your Figma */
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* OVERVIEW block */
.project-overview {
  padding: 80px 0 110px;
  position: relative;
  z-index: 1;            /* sits above the glow */
}

.project-overview-inner {
  text-align: center;
}

.project-overview-heading {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 18px;
  margin-bottom: 18px;
}

.project-overview-text {
  max-width: 760px;
  margin: 0 auto 54px;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
}

.project-overview-hero img {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
  border-radius: 26px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
  .project-overview {
    padding: 60px 0 80px;
  }

  .project-overview-heading {
    font-size: 14px;
    letter-spacing: 0.16em;
  }

  .project-overview-text {
    font-size: 13px;
    margin-bottom: 32px;
    padding: 0 8px;
  }

  .project-overview-hero img {
    max-width: 320px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  }
}



/* ---------- CASE SECTION: PROBLEM / REVIEWING ---------- */

.case-section--problem {
  padding: 80px 0 40px;
}

.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 80px;
  align-items: flex-start;
}

/* ROW 1: PROBLEM + BULLETS ACROSS FULL WIDTH */

.problem-row {
  grid-column: 1 / 3;             /* span both columns */
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 70px;
  padding-left: 0px;
}

.problem-label {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* bullets take the rest of the width */
.problem-list {
  list-style: disc;
  padding-left: 130px;
  flex: 1;
  max-width: none;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
}

/* ROW 2 LEFT: IMAGE */

.problem-figure {
  grid-column: 1 / 2;
  margin: 0;
  text-align: center;
}

.problem-figure img {
  width: 80%;                /* tweak 70–85 if needed */
  max-width: 520px;
  display: block;
  margin-left: -20px;
  
}

.figure-caption {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.7;
  margin-left: -160px;
}

/* ROW 2 RIGHT: APPROACH BLOCK */

.approach-block {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 80px;   
  margin-left: -70px;       /* move down to line up with image */
}

.approach-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.8;
  margin-top: -50px;
}

.approach-title {
  font-size: 36px;
  text-transform: lowercase;
  color: #f97316;
  margin-top: -25px;
}

.approach-body {
  font-size: 14px;
  line-height: 1.7;
  max-width: 420px;
  opacity: 0.9;
}

.approach-list {
  list-style: disc;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
  margin-top: 50px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .case-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .problem-row {
    grid-column: 1 / 2;
    flex-direction: column;
    gap: 16px;
  }

  .problem-figure {
    grid-column: 1 / 2;
  }

  .approach-block {
    grid-column: 1 / 2;
    margin-top: 20px;
  }

  .problem-figure img {
    width: 100%;
  }
}



@media (max-width: 768px) {
  .case-section--problem {
    padding: 60px 0 40px;
  }

  .problem-row {
    gap: 12px;
    margin-bottom: 48px;
  }

  .problem-label {
    font-size: 14px;
    letter-spacing: 0.16em;
    margin-left: 20px;
  }

  .problem-list {
    padding-left: 22px;
    font-size: 13px;
  }

  .problem-figure img {
    width: 100%;
    max-width: 360px;
    margin: 50px auto;
  }

  .figure-caption {
    margin-left: 0;
    text-align: center;
    font-size: 8px;
    margin-bottom: 50px;
    margin-top: -50px;
    
  }

  .approach-block {
    margin-top: 24px;
    margin-left: 0;
  }

  .approach-title {
    font-size: 28px;
  }

  .approach-body,
  .approach-list {
    font-size: 13px;
  }
}


/* ---------- CASE SECTION: RESEARCHING / REDESIGN ---------- */

.case-section--research {
  padding: 120px 0 80px;
}

.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "research inspiration"
    "workflow redesign";
  column-gap: 80px;
  row-gap: 80px;
  align-items: flex-start;
}

/* place each block in the right cell */
.approach-block--research { 
  grid-area: research;
}

.inspiration-figure {
  grid-area: inspiration;
}

.workflow-figure {
  grid-area: workflow;
}

.approach-block--redesign {
  grid-area: redesign;
}

/* shared text block container (reuses existing approach-* text styles) */
.approach-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* small vertical nudges – tweak to match Figma perfectly */
.approach-block--research {
  margin-top: 75px;      /* adjust if you want it lower/higher */
  margin-left: 5px;
}

.approach-block--redesign {
  margin-top: 100px;   /* tweak until it lines with workflow img */
  margin-left: 50px;
}

/* IMAGES + CAPTIONS */

.inspiration-figure,
.workflow-figure {
  margin: 0;
  text-align: center;
}

.inspiration-figure img,
.workflow-figure img {
  display: block;
  width: 80%;
  max-width: 540px;   /* adjust to match exports */
  margin-top: -40px;
  margin-left: -25px;
  
}

.workflow-figure img {
  width: 70%;
}

.figure-caption--label {
  margin-top: 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-left: -150px;
}

.figure-caption--label1 {
  margin-top: -15px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-left: -220px;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .research-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "research"
      "inspiration"
      "workflow"
      "redesign";
    row-gap: 48px;
  }

  .approach-block--research,
  .approach-block--redesign {
    margin-top: 0;
  }

  .inspiration-figure img,
  .workflow-figure img {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  .case-section--research {
    padding: 80px 0 60px;
  }

  .research-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "inspiration"
      "research"
      "workflow"
      "redesign";
    row-gap: 40px;
  }

  .approach-block--research,
  .approach-block--redesign {
    margin-top: 12px;
    margin-left: 0;
  }

  .inspiration-figure img,
  .workflow-figure img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .figure-caption--label,
  .figure-caption--label1 {
    margin-left: 0;
    text-align: center;
    font-size: 8px;
  }

  .figure-caption--label1 {
    margin-top: 2px;
  }

  .approach-block--research .approach-title,
  .approach-block--redesign .approach-title {
    font-size: 28px;
  }

  .approach-block--research .approach-body,
  .approach-block--redesign .approach-body {
    font-size: 13px;
  }
}


/* ---------- ACHIEVEMENT SECTION ---------- */

.case-section--achievement {
  padding: 120px 0 140px;
  position: relative;
}

/* main big gradient card */
.achievement-card {
  /* NEW: CSS gradient instead of image */
  background:
    radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.35) 0, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(249, 115, 22, 0.25) 0, transparent 55%),
    linear-gradient(135deg, #1b0800, #0a0300);
  border-radius: 48px;
  padding: 80px 120px 120px;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  transform: translateX(-45px);
  margin-top: -20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85);
}

/* heading group */
.achievement-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: .8;
  font-size: 14px;
}

.achievement-title {
  font-size: 42px;
  color: #f97316;
  margin: -5px 0 18px;
}

.achievement-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.7;
  opacity: .9;
}

/* AI bubble */
.achievement-ai {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)),
    radial-gradient(circle at 70% 90%, rgba(249,115,22,0.35), rgba(0,0,0,0.25));
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  right: -40px;
  bottom: -60px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  transform: translateY(130px);
  padding: 50px;
  padding-bottom: 70px;

  /* 👇 glass magic */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9),
              inset 0 0 40px rgba(255,255,255,0.05);
}

/* full-width AI card under the gradient rectangle */
.ai-card {
  max-width: 1100px;                  /* matches achievement-card */
  margin: 28px auto 0;                /* center + small gap under gradient */
  padding: 22px 26px;
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
  text-align: left;
}

.ai-card .ai-tag {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  opacity: 0.9;
}

.ai-card .ai-text {
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
}


/* small AI tag */
.ai-tag {
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .14em;
  margin-bottom: 20px;
  margin-top: -20px;
}

/* AI bubble text */
.ai-text {
  font-size: 14px;
  line-height: 1.7;
  opacity: .95;
}


.case-footer {
  padding: 60px 0 0;
  text-align: center;
}

/* icons row */
.footer-icons {
  display: flex;
  justify-content: center;
  gap: 45px;
  margin-bottom: 16px;
}

.footer-icons a {
  color: #3d3d3d;
  font-size: 26px;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

.footer-icons a:hover {
  color: #f97316;          /* brighter orange on hover */
  transform: translateY(-3px);
  opacity: 1;
}

/* copyright text */
.footer-copy {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 18px;
}

.footer-heart {
  color: #ff4b4b;
}

/* gradient strip – same vibe as your main page */
.footer-gradient {
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #f97316 0%, #2c1c07 40%, #f97316 100%);
}


/* inline AI block – inside the gradient card */
.achievement-ai-inline {
  display: none; /* hidden by default (desktop) */
  margin-top: 32px;
  padding: 22px 26px;
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* reuse existing styles */
.achievement-ai-inline .ai-tag {
  margin-top: 0;
  margin-bottom: 12px;
}

.achievement-ai-inline .ai-text {
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .case-section--achievement {
    padding: 80px 0 100px;
  }

  .achievement-card {
    max-width: 100%;
    border-radius: 32px;
    padding: 32px 20px 40px;
    transform: none;        /* no sideways shift on mobile */
    margin-top: 0;
  }

  .achievement-label {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .achievement-title {
    font-size: 30px;
    margin-bottom: 12px;
  }

  .achievement-body {
    font-size: 13px;
  }

  /* make the AI bubble smaller / lower so it doesn't crush the layout */
  .achievement-ai {
    width: 220px;
    height: 220px;
    right: 50%;
    transform: translate(50%, 80px); /* center under card */
    bottom: -120px;
    padding: 30px;
  }

  .ai-tag {
    font-size: 11px;
  }

  .ai-text {
    font-size: 13px;
  }
}
@media (max-width: 900px) {
  /* hide the round bubble on mobile */
  .achievement-ai {
    display: none;
  }

  /* show the inline AI block inside the card */
  .achievement-ai-inline {
    display: block;
  }
}








/* ---------- HAUNTED HISTORY PAGE ---------- */

.booklet-hero {
  position: relative;
  padding: 120px 0 80px;
}

/* reuse hero glow but from left side */
.hero-glow--left {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  transform: translate(-35%, -40%);
  
}




/* top meta row: project / role / tools / deliverables */
.booklet-meta-row {
  display: flex;
  justify-content: flex-start;
  gap: 430px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
  opacity: .8;
}




.booklet-meta {
  max-width: 420px;
}

.meta-label {
  font-weight: 700;
  font-size: 14px;
}
@media (max-width: 900px) {
  .meta-label {
    display: block;      /* forces line break after the label */
    margin-top: 5px;  /* small breathing room */
  }
}


/* main layout: image + overview copy */
.booklet-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  column-gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.booklet-figure {
  margin: 0;
}

.booklet-figure img {
  width: 75%;
  height: auto;
  display: block;
  border-radius: 32px;
  margin-left: -45px;
  margin-top: -80px;
}

/* overview text block on the right */
.booklet-section-label {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}

.booklet-overview-body {
  font-size: 14px;
  line-height: 1.7;
  max-width: 420px;
  opacity: 0.9;
}

.booklet-logo {
  margin-top: 20px;
  max-width: 100px;
  height: auto;
  opacity: 0.95;
  align-items: center;
}



/* responsive tweak */
@media (max-width: 900px) {
  .booklet-meta-row {
    flex-direction: column;
    gap: 24px;
    margin-top: -40px;
  }

  .booklet-main {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .booklet-logo {
    margin-top: 40px;
  }
}

/* ---------- LIBRARY / DESIGNING GRID (PROJECT 2) ---------- */

.case-section--library {
  padding: 120px 0 80px;
  margin-top: -50px;
}

.library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "library archive"
    "workflow designing";
  column-gap: 80px;
  row-gap: 80px;
  align-items: flex-start;
}

/* place each block in the correct cell */
.approach-block--library {
  grid-area: library;
}

.library-figure {
  grid-area: archive;
}

.map-figure {
  grid-area: workflow;
}

.approach-block--designing {
  grid-area: designing;
}

/* shared approach block container (same idea as project 1) */
.approach-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* small nudges to match your Figma layout */
.approach-block--library {
  margin-top: 70px;   /* tweak up/down */
  margin-left: 5px;
}

.approach-block--designing {
  margin-top: 90px;   /* tweak until it lines up with maps */
  margin-left: 40px;
}

/* images + caption */

.library-figure,
.map-figure {
  margin: 0;
  text-align: center;
}

.library-figure img,
.map-figure img {
  display: block;
  width: 65%;
  max-width: 540px;     /* adjust if your export is wider/narrower */
  
}
.library-figure img{

  margin-left: 35px;
}
.map-figure img {
  margin-top: -20px;
}

/* WORKFLOW caption */
.figure-caption--workflow {
  margin-top: 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-left: -210px;
}
.figure-caption--workflow1 {
  margin-top: 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-left: -100px;
}

/* top booklet mockup above the gradient card */
.achievement-hero {
  text-align: center;
  margin-bottom: -70px;
}

.achievement-hero img {
  max-width: 300px;      /* tweak until it matches your Figma */
  width: 100%;
  height: auto;
  margin-top: -80px;
}

/* two posters under the card */
.booklet-gallery {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  gap: 80px;             /* space between the two posters */
}

.booklet-gallery-item {
  max-width: 260px;      /* approximate size from your screenshot */
  width: 100%;
  height: auto;
  display: block;
}

/* --- BOOKLET ONLY OVERRIDES --- */

.case-section--achievement-booklet .achievement-hero {
  position: relative;
  z-index: 2;          /* on top of the card */
  margin-bottom: -80px;/* overlap amount – tweak this */
}

.case-section--achievement-booklet .achievement-card {
  position: relative;
  z-index: 1;          /* behind the hero image */
}

/* custom size for the booklet gradient card only */
.case-section--achievement-booklet .achievement-card {
  max-width: 800px;          /* width just for this page */
  padding: 70px 80px 100px;  /* inside spacing */
  transform: none;           /* cancel any global translateX */
  margin: 0 auto;            /* keep it centered */
}
/* wrapper holding the two images */
.booklet-gallery {
  max-width: 1200px;        /* lines up with your narrowed gradient box */
  margin: 48px auto 0;     /* centers the whole row */
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: -350px;
}

/* each image */
.booklet-gallery-item {
  width: 100%;
  max-width: 230px;        /* keeps them from getting too big */
  display: block;
}


@media (max-width: 900px) {

  /* hero area */
  .booklet-hero {
    padding: 80px 0 40px;
  }



  .booklet-meta-row {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
  }

  .booklet-main {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .booklet-figure img {
    width: 100%;
    margin: 0 auto;
    border-radius: 24px;
  }

  .booklet-overview-body {
    max-width: 100%;
  }

  /* library / designing section – stack like project 1 */
  .library-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "library"
      "archive"
      "workflow"
      "designing";
    row-gap: 40px;
  }

  .approach-block--library,
  .approach-block--designing {
    margin-top: 0;
    margin-left: 0;
  }

  .library-figure img,
  .map-figure img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .figure-caption--workflow,
  .figure-caption--workflow1 {
    margin-left: 0;
    text-align: left;
  }

  /* achievement gradient card */
  .case-section--achievement-booklet .achievement-card {
    max-width: 100%;
    padding: 32px 20px 40px;
    margin: 0 auto;
  }

  .achievement-hero img {
    max-width: 200px;
    margin-top: -50px;
    margin-bottom: 50px;
  }

  /* posters under gradient – stacked */
  .booklet-gallery {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
  }

  .booklet-gallery-item {
    max-width: 260px;
  }
}


/* hamburger base (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  width: 25px;
  height: 24px;
  padding: 0;
  opacity: .8;
}

/* two lines */
.nav-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

.nav-toggle span:first-child {
  top: 5px;
}

.nav-toggle span:last-child {
  bottom: 5px;
}

/* X state when open */
.site-header.nav-open .nav-toggle span:first-child {
  top: 11px;
  transform: rotate(45deg);
}

.site-header.nav-open .nav-toggle span:last-child {
  bottom: 11px;
  transform: rotate(-45deg);
}






/* ---------- MOBILE LAYOUT ---------- */
@media (max-width: 768px) {

  /* NAV: hide links, show hamburger */
  .header-inner {
    align-items: center;
  }

  .header-center {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  /* when open, show nav as dropdown under header */
  .site-header.nav-open .header-center {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px 24px 20px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-header.nav-open .header-center ul {
    flex-direction: column;
    gap: 12px;
  }
  

  .site-header.nav-open .header-center a {
    font-size: 0.8rem;
  }

  /* HERO: illustration as background, text in glass box */
  .hero {
    padding: 100px 0 80px;
    min-height: 100vh;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .hero-glow {
    width: 600px;
    transform: translate(20%, -55%);
    opacity: 0.7;
  }

  .hero-illustration {
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    opacity: 0.35;
    pointer-events: none;
  }

  .hero-illustration img {
    width: 70%;
    height: auto;
    transform: none;
    margin-top: -60px;
  }

  .hero-text {
    margin-top: 0;
    position: relative;
    z-index: 1;
    max-width: 380px;
    padding: 20px 20px 22px;
    border-radius: 24px;
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .role {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .hero-title {
    font-size: 58px;
  }

  .subtitle,
  .current-role {
    font-size: 13px;
    max-width: none;
  }

  /* SELECTED WORKS: stack cards, smaller image in top-right */
  .selected-works {
    padding: 0px 0 60px;
    margin-top: -100px;
  }

  .section-title {
    font-size: 20px;
    letter-spacing: 0.16em;
  }

  .star-bg {
    width: 480px;
    left: -10%;
    top: 18%;
  }

  .work-card {
    grid-template-columns: 1fr;
    padding: 20px 22px;
    border-radius: 24px;
    gap: 20px;
  }

  .work-title {
    font-size: 22px;
  }

  .work-description {
    font-size: 13px;
  }

  .work-tags {
    margin: 12px 0 18px;
  }

  .work-button {
    font-size: 11px;
    padding: 8px 18px;
  }

  /* image sits above text, smaller, top-right */
  .work-media {
    order: -1;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .work-media img {
    max-width: 100%;
  }

  .mockup-labels {
    width: 100%;
    font-size: 10px;
    margin-top: 6px;
  }

  /* GRAPHIC POSTERS GRID: 2 columns on mobile */
  .graphic-posters {
    padding: 40px 0 80px;
  }

  .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .poster-title {
    font-size: 10px;
    padding-left: 5px;
  }

  /* FOOTER smaller */
  .footer {
    padding: 80px 0 0;
  }

  .footer-title {
    font-size: 70px;
  }

  .footer-email a {
    font-size: 16px;
  }

  

  /* smaller header height on mobile */
  .site-header {
    padding: 6px 0;
  }

  /* smaller logo only on mobile */
  .site-header .logo {
    width: 24px;   /* tweak: 24–32 */
  }

  /* header row spacing on mobile */
  

  /* narrow the header container edges on mobile
     (only in header, not all containers on page) */
  .site-header .container {
    padding: 0 12px;
  }


  
}

/* default: social icons visible on desktop */
.nav-social-mobile {
  display: none;     /* mobile-only items hidden on desktop */
}

/* MOBILE */
@media (max-width: 768px) {
  /* hide the icon row in the header */
  

  /* show the text versions inside the menu */
  .nav-social-mobile {
    display: block;
    margin-top: 8px;
  }

  .nav-social-mobile a {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
  }

  @media (max-width: 768px) {
  /* hide ONLY the social icons, keep the wrapper + burger */
  .social-icons a {
    display: none;
  }

  /* make sure the hamburger is visible + aligned */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* mobile-only nav items (text “Instagram / LinkedIn” in menu) */
  .nav-social-mobile {
    display: block;
    margin-top: 0px;
  }

  .nav-social-mobile a {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
  }
}

}









/* keep 2 columns even on very small screens */
@media (max-width: 480px) {
  .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html {
  scroll-behavior: smooth;
}