/* ---- Page-to-page transitions (Home <-> Work, Home <-> About) ----
   Simplified: plain slides, one easing curve per element, no scale/zoom.
   The zoom version (matched exactly to a Jitter export) kept surfacing
   Safari-specific lag that couldn't be pinned down, so this trades that
   fidelity for something much smaller and more robust: home-tab slides out
   left, work/about-tab slides in from the right, nav bar drops in from the
   top. Easing is cubic-bezier(0.65,0,0.35,1) (ease-in-out): a pure ease-out
   curve launches at full velocity from frame one, which for an element this
   large read as a jarring flash right as it started moving -- ease-in-out
   ramps up gently first. Cross-document View Transitions: browsers without
   support just navigate normally (no error, no transition) -- progressive
   enhancement. */
@view-transition {
  navigation: auto;
}
/* Only the named elements below should visibly animate -- neutralize the
   browser's default full-page cross-fade so nav/background swap instantly
   instead of ghosting. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* IMPORTANT: never put a custom `animation` on ::view-transition-group() --
   overriding it silently destroys the UA's own top/left positioning for
   that box (confirmed via computed-style inspection: top/left both reset
   to 0px), which caused the earlier "flies to top-left" bug. Motion lives
   on ::view-transition-old()/::view-transition-new() instead. */
/* -100vw - 100% (viewport width + the element's own width) guarantees full
   clearance off either edge no matter how wide the actual browser window is
   -- a fixed px offset (the original -1200px/1282px) was derived from one
   assumed viewport size, so on a wider real window the card hadn't fully
   left before the transition's fill-mode handed off to the live page,
   showing a visible edge snapping away. */
@keyframes vt-slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100vw - 100%));
  }
}
@keyframes vt-slide-in-from-right {
  from {
    transform: translateX(calc(100vw + 100%));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes vt-slide-in-from-left {
  from {
    transform: translateX(calc(-100vw - 100%));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes vt-slide-out-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100vw + 100%));
  }
}
@keyframes vt-nav-drop-in {
  from {
    transform: translateY(-102px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes vt-nav-drop-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-102px);
  }
}

html[data-transition="home-to-work"]::view-transition-old(home-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-out-left;
}
html[data-transition="home-to-work"]::view-transition-new(work-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-in-from-right;
}
html[data-transition="home-to-work"]::view-transition-new(page-nav) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-nav-drop-in;
}

html[data-transition="work-to-home"]::view-transition-new(home-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-in-from-left;
}
html[data-transition="work-to-home"]::view-transition-old(work-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-out-right;
}
html[data-transition="work-to-home"]::view-transition-old(page-nav) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-nav-drop-out;
}

html[data-transition="about-to-home"]::view-transition-new(home-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-in-from-left;
}
html[data-transition="about-to-home"]::view-transition-old(about-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-out-right;
}
html[data-transition="about-to-home"]::view-transition-old(page-nav) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-nav-drop-out;
}

html[data-transition="home-to-about"]::view-transition-old(home-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-out-left;
}
html[data-transition="home-to-about"]::view-transition-new(about-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-in-from-right;
}
html[data-transition="home-to-about"]::view-transition-new(page-nav) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-nav-drop-in;
}

/* Work <-> About: same card slide, but no home-tab or nav bar involved -- the
   nav sits at the identical position/size on both pages, so leaving it with
   no animation rule here lets it just stay put (no drop in/out). */
html[data-transition="work-to-about"]::view-transition-old(work-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-out-left;
}
html[data-transition="work-to-about"]::view-transition-new(about-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-in-from-right;
}

html[data-transition="about-to-work"]::view-transition-old(about-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-out-right;
}
html[data-transition="about-to-work"]::view-transition-new(work-tab) {
  animation: 800ms cubic-bezier(0.65, 0, 0.35, 1) both vt-slide-in-from-left;
}

/* Scoped to the transition only (the real .glass-card keeps its full glass
   effect everywhere else). backdrop-filter can't be baked into the static
   old/new snapshot images, so the UA carries it onto ::view-transition-group()
   instead -- which stays live and keeps re-sampling whatever's currently
   behind the moving card, and that shows up as a heavy blur smear through
   the middle of the transition. That property can't be overridden on the
   group pseudo-element directly (confirmed: not even with !important -- it's
   a UA-computed value outside the normal cascade for that pseudo), so instead
   JS (see the pageswap/pagereveal listeners in each page's inline head script)
   toggles this class on <html> right before each snapshot is captured, which
   strips backdrop-filter off the REAL .glass-card element at the source. */
html.vt-no-blur .glass-card,
html.vt-no-blur .glass-card--work,
html.vt-no-blur .glass-card--about {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- Design tokens ---- */
:root {
  --ink: #3a3a3a;
  --ink-soft: #6b6b6b;
  --cream: #ffffff;
  --accent: #ef8080;
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-bg-solid: #ffffff;
  --radius-lg: 40px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --max-width: 1200px;
  --nav-height: 88px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Quicksand", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ---- Blob background canvas ----
   Fallback gradient (colors sampled directly from blob-background.json's own
   shape fills) instead of plain white: on a fresh page load -- which is what
   every cross-document transition target is -- there's a brief window before
   the Lottie JSON fetches/parses/paints its first frame. With animation:none
   on ::view-transition-old/new(root) (no cross-fade cushioning it), that gap
   was showing as a hard white flash the instant the incoming page appears. */
.blob-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(135deg, #fff1e1 0%, #ffe1e1 60%, #ffffff 100%);
}
.blob-bg lottie-player,
.blob-bg .lottie-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Nav ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 28px 24px 0;
}
.site-nav__inner {
  display: flex;
  gap: 40px;
  align-items: center;
}
.site-nav a {
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Homepage stage ---- */
.home-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.glass-card {
  view-transition-name: home-tab;
  position: relative;
  display: flex;
  width: 1000px;
  height: 600px;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: url(#glass-distortion-card-simple) blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow:
    0 0 100px 0 rgba(0, 0, 0, 0.1),
    inset 0 0 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
/* Simulated -45deg light source: soft glow diffusing inward from the rim at both corners */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.06) 16%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, 0.06) 84%,
    rgba(255, 255, 255, 0.2) 100%
  );
  pointer-events: none;
}
/* Diagonal glass rim: bright at top-left AND bottom-right, fading at the other two corners */
.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  /* Conic (angle-based) gradient: corner angles computed for this exact 1000x600 box
     (measured clockwise from top): TR=59.04deg, BR=120.96deg, BL=239.04deg, TL=300.96deg.
     Bright at TL/BR, dim at TR/BL, with a quick fade at each dim corner. */
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 15.3%,
    rgba(255, 255, 255, 0) 16.4%,
    rgba(255, 255, 255, 0.9) 17.5%,
    rgba(255, 255, 255, 0.9) 65.3%,
    rgba(255, 255, 255, 0) 66.4%,
    rgba(255, 255, 255, 0.9) 67.5%,
    rgba(255, 255, 255, 0.9) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.traffic-lights {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.traffic-light {
  position: relative;
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.traffic-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.5) 100%
  );
  pointer-events: none;
}
.traffic-light::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.75px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0.95) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.traffic-light--red { background: rgba(255, 56, 60, 0.25); }
.traffic-light--white { background: rgba(255, 255, 255, 0.25); }
.traffic-light--green { background: rgba(52, 199, 89, 0.25); }

.divider {
  height: 4px;
  align-self: stretch;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
}

.glass-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 72px;
  flex: 1 0 0;
  align-self: stretch;
}

/* Outer frame: normal auto-layout wrapping the name frame + subtitle */
.hero-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Inner name frame: fixed 296.2 x 96.6, R/aina/Ni positioned exactly within it */
.hero-name {
  position: relative;
  width: 296.2px;
  height: 96.6px;
  margin: 0;
}
.hero-name__r {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.hero-name__aina {
  position: absolute;
  left: 86.69px;
  top: 31.51px;
  width: 128px;
  height: 49px;
}
.hero-name__ni {
  position: absolute;
  left: 235.59px;
  top: 31.51px;
  width: 56px;
  height: 49px;
}

.hero-intro {
  display: block;
  width: auto;
  height: 28px;
}

.hero-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  align-self: stretch;
}
.hero-nav__item {
  display: flex;
  width: 80px;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* was 8px for live text; Figma spaces 12px around the vectorized labels */
}
.hero-nav__icon {
  position: relative;
  display: flex;
  width: 72px;
  height: 72px;
  padding: 5.143px 3.857px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12.857px;
  aspect-ratio: 1 / 1;
  border-radius: 127.286px;
  background: rgba(255, 218, 218, 0.5);
  transition: background 0.2s ease;
}
.hero-nav__item:hover .hero-nav__icon {
  background: rgba(225, 176, 176, 0.5);
}
.hero-nav__label {
  display: block;
  height: 13px;
  width: auto;
}

@media (max-width: 1080px) {
  .glass-card {
    width: 100%;
    height: auto;
    min-height: 600px;
  }
}
@media (max-width: 560px) {
  .hero-name__text { font-size: 44px; }
  .hero-name__r { height: 54px; }
  .hero-nav { gap: 24px; }
}

/* ---- Page shell for inner pages ---- */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 120px;
}
.page-title {
  font-size: 40px;
  margin-bottom: 8px;
}
.page-subtitle {
  color: var(--ink-soft);
  font-size: 18px;
  margin-bottom: 56px;
}

/* ---- Work rows: each row holds 2 project cards side by side ---- */
.work-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  width: 1170px;
  height: 375px;
}
.work-project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  height: 100%;
}
.work-project--spacer {
  opacity: 0;
  pointer-events: none;
}
.work-project__media {
  position: relative;
  display: flex;
  width: 565px;
  max-width: 100%;
  height: 300px;
  padding: 49px 82px 0 83px;
  justify-content: center;
  align-items: flex-start;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  flex-shrink: 0;
  overflow: hidden;
}
/* Safari-specific: overflow:hidden clipping a filter:drop-shadow child can
   leave faint "phantom" edges of the filter's pre-clip bounding box behind
   (worst at corners) because it doesn't always re-clip the filter region
   cleanly during a sibling/child transform. Forcing a mask-based clip path
   (a no-op gradient mask) routes Safari through its correct rendering path
   instead of the buggy overflow+filter one. */
.work-project__media:not(.work-project__media--cluster) {
  -webkit-mask-image: linear-gradient(black, black);
}
.work-project__media img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
img.work-project__media-img--top {
  width: 400px;
  height: 271px;
  max-width: none;
  max-height: none;
  object-position: top;
  display: block;
}
img.work-project__media-img--shadow {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
  -webkit-transform: translateZ(0);
  will-change: filter;
}
/* Transform lives on this filter-free wrapper (not the filtered image itself)
   -- Safari can leave stale "ghost" corners behind when filter: drop-shadow
   and an animated transform sit on the same element, since it doesn't always
   re-rasterize the filter region correctly during the transform. Keeping the
   filtered image static and only moving its plain wrapper avoids that. */
.work-project__media-imgwrap {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
.work-project:hover .work-project__media-imgwrap {
  transform: translateY(-20px);
}
/* Multi-image collage variant: children are absolutely positioned, so drop the flex/padding centering.
   */
.work-project__media--cluster {
  padding: 0;
  justify-content: normal;
  align-items: normal;
}
.work-project__media--cluster img {
  position: absolute;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: top center;
}
/* Shared slot positions (confirmed identical across Damai + Wapoo) */
.work-project__media--cluster .img-slot-a {
  top: 80px;
  left: 70px;
}
.work-project__media--cluster .img-slot-b {
  top: 49px;
  left: 202px;
  z-index: 2;
}
.work-project__media--cluster .img-slot-c {
  top: 80px;
  left: 334px;
}
/* Damai: iPhone 17 mockups */
.work-project__media--damai img {
  width: 161.593px;
  height: 351.325px;
  border-radius: 16.079px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  object-fit: cover;
  transition: transform 0.3s ease;
}
.work-project:hover .work-project__media--damai img {
  transform: translateY(-20px);
}
/* Wapoo: phone mockups */
.work-project__media--wapoo img {
  width: 161.591px;
  height: 351.32px;
  border-radius: 10.54px;
  box-shadow: 0 0 7.454px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.work-project:hover .work-project__media--wapoo img {
  transform: translateY(-20px);
}
.work-project__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.work-project__title,
.work-project__desc {
  margin: 0;
  display: block;
}
.work-project__title img,
.work-project__desc img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 800px) {
  .hero__name { font-size: 40px; }
  .hero__actions { gap: 32px; }
}


/* ---- Note modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.modal-overlay.is-open {
  pointer-events: auto;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-overlay.is-open .modal-backdrop {
  opacity: 1;
}
.modal {
  position: absolute;
  top: 80px;
  left: 50%;
  display: flex;
  width: 800px;
  max-width: calc(100% - 48px);
  height: calc(100vh - 80px);
  padding: 80px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  border-radius: 16px 16px 0 0;
  background: #f9f5ea;
  overflow-y: auto;
  /* Swipes up from fully off-screen (below the viewport) into place -- no
     opacity change, purely a transform, kept in its own sibling from
     .modal-backdrop so the fade there doesn't bleed into this. */
  transform: translate(-50%, 100%);
  transition: transform 0.35s ease;
}
.modal-overlay.is-open .modal {
  transform: translate(-50%, 0);
}
.modal__top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  align-self: stretch;
}
.modal__close {
  display: flex;
  padding: 8px 16px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  border-radius: 99px;
  border: 1px solid #5f5f5f;
  background: transparent;
}
.modal__close-text {
  color: #5f5f5f;
  font-family: "Figtree";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.modal__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.modal__text p {
  align-self: stretch;
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree";
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.modal__contact {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
.modal__say-hi {
  display: flex;
  height: 40px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 99px;
  background: #5f5f5f;
}
.modal__say-hi-text,
.modal__say-hi-email {
  color: #fff;
  font-family: "Figtree";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.modal__say-hi-email {
  font-style: italic;
}
.modal__say-hi-arrow {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.modal__linkedin {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 99px;
  background: #5f5f5f;
}
.modal__linkedin-icon {
  width: 17.633px;
  height: 18px;
  flex-shrink: 0;
  aspect-ratio: 48 / 49;
  /* File is a clean 2x export (36x36) of this ~18x18 icon, so it fills at
     100% with zero crop -- the leftover Figma zoom/offset was tuned for a
     different source image in that layer, same issue as photo-3. */
  background: url("../assets/images/about/linkedin-icon.png") no-repeat 0 0 /
    100% 100%;
}

/* ---- Case study page backgrounds ----
   Each case study gets its OWN static blob background sampled from that
   brand's palette (MUJI: dark red #8B0002 + tan #C98C72) instead of reusing
   the shared home/work/about pink blob-bg animation. Exact size/position/
   blur measured from Figma's "Background" frame (5 blurred circles, no
   motion -- unlike the animated Lottie blob, this one is a static frame). */
.case-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #fff;
}
.case-bg__blob {
  position: absolute;
  border-radius: 50%;
}

/* Text-based nav used on case study pages (Figma: Frame 26) -- distinct from
   the icon-based .page-nav on Home/Work/About. */
.case-nav {
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  z-index: 10;
}
.case-nav a {
  color: rgba(95, 95, 95, 0.5);
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
}
.case-nav a:hover,
.case-nav a.is-active {
  color: #5f5f5f;
}

/* Glass card top bar for case studies (Figma: Frame 229 = Frame 228 back
   button + Frame 227 fake-URL pill) -- replaces the traffic-lights row used
   on Home/Work/About. */
.case-topbar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.case-topbar__back {
  display: flex;
  width: 46px;
  height: 46px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: rgba(95, 95, 95, 0.1);
}
.case-topbar__url {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  padding: 12px 16px;
  border-radius: 99px;
  background: rgba(95, 95, 95, 0.1);
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #5f5f5f;
}
.case-topbar__url-em {
  color: rgba(95, 95, 95, 0.75);
}

/* ---- Case study pages ----
   Specs measured directly from Figma Dev Mode (MUJI frame, node 76-1945):
   outer column is Frame 3 (1250px, 40px padding, 40px gap between children).
   Lives inside .glass-card--muji, which already supplies that same 1250px
   width and 40px padding (matching .glass-card--work/--about), so .case-hero
   itself only needs to be the flex column -- not its own width/padding.
   Collage (Frame 218, 1096x345) positions its 3 photos with raw coordinates
   that don't respect the frame's own padding -- measured each image's exact
   left/top/width/height directly rather than guessing from the padding. */
.case-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  align-self: stretch;
  font-family: "Figtree", sans-serif;
}
.case-hero__eyebrow {
  align-self: flex-start;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}

/* -- Photo collage: exact px positions from Figma, relative to the
   1096x345 collage box. Z-order (back to front): product, pens, desktop --
   confirmed live against the design (the MUJI homepage mockup sits above
   the other two photos). */
/* Frame 218 in Figma: a real wrapping frame around the collage (not just
   the collage's own box) -- stretches full width, insets the collage with
   its own asymmetric padding (35/37/20/37), and centers it. */
.case-hero__collage-frame {
  display: flex;
  padding: 35px 37px 20px 37px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.case-hero__collage {
  position: relative;
  flex: none;
  width: 1096px;
  height: 345px;
}
.case-hero__collage-img {
  position: absolute;
  object-fit: cover;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.case-hero__collage-img--desktop {
  left: 348px;
  top: 0;
  width: 400px;
  height: 345px;
  border-radius: 9.6px;
  z-index: 3;
}
.case-hero__collage-img--product {
  left: 696px;
  top: 31px;
  width: 400px;
  height: 300px;
  border-radius: 9.6px;
  z-index: 1;
}
.case-hero__collage-img--pens {
  left: 0;
  top: 30px;
  width: 400px;
  height: 300px;
  border-radius: 12px;
  z-index: 2;
}

/* -- Damai hero: Frame 218 (400px tall, 40px radius) has NO fill of its own --
   it's transparent, so the page's blob background shows through the glass
   card behind it. Holds a 4-phone-mockup collage (Group 16, 675x380). Each
   phone is 161.6x351.3px, laid out edge-to-edge (even flex gap, no overlap);
   the 2 outer phones sit ~26.6px lower than the 2 inner phones. */
.case-hero__collage-frame--damai {
  height: 400px;
  padding: 24px;
  border-radius: 40px;
}
.case-hero__collage--damai {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 675px;
  height: 380px;
}
.case-hero__collage-img--phone {
  position: static;
  flex: none;
  width: 161.6px;
  height: 351.3px;
  border-radius: 16px;
}
.case-hero__collage-img--phone1,
.case-hero__collage-img--phone3 {
  margin-top: 36.58px;
}
.case-hero__collage-img--phone2,
.case-hero__collage-img--phone4 {
  margin-top: 10px;
}

/* -- Wapoo hero: Frame 218 (400px tall, 40px radius, also no fill of its
   own) holds a 4-phone-mockup collage (Group 1, 681.44x350) padded 0
   244.5px so the row's first/last phone sit flush with the frame edges.
   Each phone has its own top offset: 25 / 0 / 50 / 25px, left to right. */
.case-hero__collage-frame--wapoo {
  height: 400px;
  padding: 0 244.5px;
  border-radius: 40px;
}
.case-hero__collage--wapoo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 681px;
  height: 400px;
}
.case-hero__collage-img--wapoo {
  position: static;
  flex: none;
  width: 161.5px;
  height: 350px;
  border-radius: 16.5px;
  object-fit: cover;
  box-shadow: 0 0 7.45px 0 rgba(0, 0, 0, 0.25);
}
.case-hero__collage-img--wapoo1 {
  margin-top: 25px;
}
.case-hero__collage-img--wapoo2 {
  margin-top: 0;
}
.case-hero__collage-img--wapoo3 {
  margin-top: 50px;
}
.case-hero__collage-img--wapoo4 {
  margin-top: 25px;
}

/* -- White card below the collage (Frame 230, 1090x auto, radius 40) -- */
.case-hero__card {
  padding: 40px;
  border-radius: 40px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.case-hero__titlerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.case-hero__title {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: normal;
}
.case-hero__desc {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  max-width: 642px;
}
.case-hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  padding: 24px 0;
  border-top: 1px solid rgba(95, 95, 95, 0.25);
}
.case-hero__meta-info {
  display: flex;
  align-items: center;
  gap: 40px;
}
.case-hero__meta-info > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-hero__meta-info span { display: block; font-family: "Figtree", sans-serif; font-size: 18px; line-height: 22px; color: #5f5f5f; }
.case-hero__meta-info .label { font-weight: 400; }
.case-hero__meta-info .value { font-weight: 300; }
.case-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--case-accent, #8b0013);
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
}

.case-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px;
}
.case-section__eyebrow {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.case-section h2 { font-size: 26px; margin: 0 0 16px; }
.case-section p { line-height: 1.7; color: var(--ink-soft); }
.case-section img { border-radius: var(--radius-sm); margin: 24px 0; }

/* ---- Context section (Figma: Frame 231) -- built version, overrides the
   generic placeholder rules above via the extra .case-section specificity.
   Lives inside .glass-card--case like .case-hero, so it only needs to fill
   the available 1170px content width, not set its own max-width/margin. */
.case-section.case-section--built {
  max-width: none;
  margin: 0;
  width: 100%;
  padding: 40px;
  border-radius: 40px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  font-family: "Figtree", sans-serif;
}
.case-section__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
}
.case-section .case-section__heading-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.case-section .case-section__eyebrow {
  margin: 0;
  color: var(--case-accent, #8b0013);
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.42px;
  text-transform: uppercase;
}
.case-section .case-section__title {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}
.case-section .case-section__body {
  align-self: stretch;
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-section__link {
  color: var(--case-accent, #8b0013);
  text-decoration: underline;
}
.case-section__images {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
}
.case-section__image-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 400px;
  margin: 0;
}
.case-section__image-group img {
  width: 400px;
  height: 227px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
}
.case-section__image-group figcaption {
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
}
/* -- Portrait phone screenshots (Damai Context: Frame 642, gap 80px) -- */
.case-section__images--phone {
  gap: 80px;
}
.case-section__image-group--phone {
  width: 184px;
}
.case-section__image-group--phone img {
  width: 184px;
  height: 400px;
}
.case-section__callout {
  align-self: stretch;
  padding: 24px 32px;
  border-radius: 12px;
  border-left: 6px solid var(--case-accent, #8b0013);
  background: var(--case-callout-bg, #f6f3ec);
}
.case-section__callout p {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 140%;
}

/* ---- Competitor analysis section (Figma: Frame 247) ----
   Same shell as Context, except children are horizontally centered
   (align-items: center, not flex-start) since the logo row and insight
   cards are narrower than the full content width. */
.case-section--centered {
  align-items: center;
}
.case-section__logo-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  align-self: stretch;
}
.case-section__logo-row::before,
.case-section__logo-row::after {
  content: "";
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.case-section__logo-row::before {
  left: -40px;
  background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0) 100%);
}
.case-section__logo-row::after {
  right: -40px;
  background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0) 100%);
}
.case-section .case-section__logo {
  flex: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 0;
  margin: 0;
}
.case-section__insights {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: 24px;
}
.case-section__insight {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #f6f3ec;
}
.case-section__insight-badge {
  display: flex;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--case-accent, #8b0013);
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-section__insight-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
}
.case-section__insight-text h3 {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}
.case-section__insight-text p {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}

/* ---- Competitor & secondary research (Figma: Frame 232) ---- */
.case-competitor-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 24px;
}
.case-competitor-labels {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 40px;
}
.case-competitor-label {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px;
  border-radius: 12px;
}
.case-competitor-label--lavender { background: #e9e8ff; }
.case-competitor-label--blue { background: #cad7ff; }
.case-competitor-label__inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
}
/* Figma stroke is a dashed rounded rect (10px dash / 10px gap) -- same
   pattern as .case-favorites__verdict-inner (Damai). */
.case-competitor-label__inner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.case-competitor-label__inner svg rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 11px;
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 10 10;
  stroke: rgba(0, 49, 201, 0.25);
}
.case-competitor-label__inner span {
  position: relative;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-competitor-cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.case-competitor-card {
  display: flex;
  width: 250px;
  padding: 16px 16px 20px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 12px;
  background: #e2f5f7;
}
.case-competitor-card__app {
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-section .case-competitor-card__logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  margin: 0;
}
.case-section .case-competitor-card__name {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-competitor-card__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 8px;
}
.case-section .case-competitor-card__screenshot {
  width: 218px;
  height: 264px;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
  margin: 0;
}

/* ---- Design decisions / requirements grid (Figma: Frame 265) ---- */
.case-requirements {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.case-requirements__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.case-requirements__card {
  display: flex;
  flex: 1 0 0;
  padding: 16px 16px 20px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 12px;
}
.case-requirements__card--01 { background: #e2f5f7; }
.case-requirements__card--02 { background: #c5eaee; }
.case-requirements__card--03 { background: #e9e8ff; }
.case-requirements__card--04 { background: #cad7ff; }
.case-requirements__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.case-requirements__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.case-section .case-requirements__number {
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-requirements__card--01 .case-requirements__number { color: #45dbe9; }
.case-requirements__card--02 .case-requirements__number { color: #55a7b0; }
.case-requirements__card--03 .case-requirements__number { color: #4a42df; }
.case-requirements__card--04 .case-requirements__number { color: #0031c9; }
.case-section .case-requirements__title {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-requirements__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 12px;
}
.case-requirements__card--01 .case-requirements__icon { background: rgba(69, 219, 233, 0.25); }
.case-requirements__card--02 .case-requirements__icon { background: rgba(85, 167, 176, 0.25); }
.case-requirements__card--03 .case-requirements__icon { background: rgba(74, 66, 223, 0.25); }
.case-requirements__card--04 .case-requirements__icon { background: rgba(0, 49, 201, 0.25); }
.case-section .case-requirements__icon img {
  width: 33px;
  height: 33px;
  margin: 0;
}

/* ---- Redesign explorations (Figma: Frame 259 etc) ---- */
.case-section--translucent {
  opacity: 0.9;
}
.case-redesign__gallery {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.case-redesign__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 184px;
}
.case-section .case-redesign__shot img {
  width: 184px;
  height: 400px;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
  margin: 0;
}
.case-redesign__callout {
  position: absolute;
  display: flex;
  width: 200px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 2px dashed #91bdc2;
  background: #e2f5f7;
}
.case-section .case-redesign__callout p {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
}
.case-redesign__callout--1 { left: 0; top: 12px; }
.case-redesign__callout--2 { left: 0; bottom: 25px; }
.case-redesign__callout--3 { left: 0; top: 154px; }
.case-redesign__callout--4 { right: 0; top: 105px; }
.case-redesign__callout--5 { right: 0; bottom: 107px; }
.case-redesign__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #91bdc2;
}
.case-redesign__line {
  position: absolute;
  height: 2px;
  background: #91bdc2;
}
.case-redesign__dot--1 { left: 352px; top: 54px; }
.case-redesign__dot--2 { left: 244px; bottom: 79px; }
.case-redesign__dot--3 { left: 244px; top: 184px; }
.case-redesign__dot--4 { right: 495px; top: 130px; }
.case-redesign__dot--5 { right: 250px; bottom: 149px; }
.case-redesign__line--1 { left: 200px; top: 58.5px; width: 156px; }
.case-redesign__line--2 { left: 200px; top: 343px; width: 47px; }
.case-redesign__line--3 { left: 200px; top: 189px; width: 47px; }
.case-redesign__line--4 { left: 592px; top: 135.5px; width: 298px; }
.case-redesign__line--5 { left: 837px; top: 272.9px; width: 53px; }

.case-persona-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}
.case-persona-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
}
.case-persona-card {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
}
.case-persona-card__avatar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 100px;
  flex: none;
  border-radius: 999px;
  border: 2.5px dashed var(--case-accent, #8b0013);
  overflow: hidden;
}
.case-persona-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-persona-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.case-persona-card__text h3 {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}
.case-persona-card__text p {
  margin: 0;
  align-self: stretch;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-persona-divider {
  width: 1px;
  height: 100px;
  flex: none;
  background: rgba(95, 95, 95, 0.25);
}
.case-persona-credit {
  align-self: center;
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
}

.case-research {
  position: relative;
}
.case-research__images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}
.case-section .case-research__image {
  width: 550px;
  height: 313px;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
  margin: 0;
}
.case-research__callout {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 250px;
  padding: 16px 16px 20px 16px;
  border-radius: 12px;
  background: #f6f3ec;
}
.case-research__callout--1 {
  left: 40px;
  top: 185px;
}
.case-research__callout--2 {
  right: 40px;
  top: 537px;
}
.case-research__callout--3 {
  left: 40px;
  top: 702px;
}
.case-research__callout--4 {
  right: 40px;
  bottom: 252.747px;
}
.case-research__callout--5 {
  left: 40px;
  bottom: 90.747px;
}
.case-research__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.case-research__number {
  color: var(--case-accent, #8b0013);
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-research__header h3 {
  margin: 0;
  align-self: stretch;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-research__divider {
  width: 100%;
  height: 1px;
  background: rgba(95, 95, 95, 0.25);
}
.case-research__callout p {
  margin: 0;
  align-self: stretch;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}

.case-concept__stages {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.case-concept__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 300px;
  flex: none;
}
.case-concept__stage-title {
  margin: 0;
  align-self: stretch;
  text-align: center;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.case-concept__stage-title strong {
  color: var(--case-accent, #8b0013);
  font-weight: 400;
}
.case-concept__version {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.case-section .case-concept__version img {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(95, 95, 95, 0.1);
  border-radius: 8px;
}
.case-concept__version-label {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
}
.case-concept__note {
  position: absolute;
  z-index: 1;
  display: flex;
  padding: 4px;
  border-radius: 12px;
}
.case-concept__note--bad {
  background: #f5e4e4;
}
.case-concept__note--good {
  background: #e3f3e7;
}
.case-concept__note-inner {
  position: relative;
  display: flex;
  padding: 8px 12px;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  border-radius: 12px;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-align: left;
}
.case-concept__note-inner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.case-concept__note-inner svg rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 11px;
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 10 10;
}
.case-concept__note--bad .case-concept__note-inner svg rect {
  stroke: rgba(139, 0, 19, 0.25);
}
.case-concept__note--good .case-concept__note-inner svg rect {
  stroke: rgba(31, 87, 45, 0.25);
}
.case-concept__note-inner span {
  position: relative;
}

.case-section.case-section--decision {
  gap: 24px;
}
.case-decision__compare {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: 72px;
}
.case-decision__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: none;
}
.case-decision__col--current {
  width: 493px;
}
.case-decision__col--redesign {
  width: 525px;
}
.case-decision__image-group img {
  height: 280px;
  object-fit: cover;
}
.case-decision__image-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}
.case-section .case-decision__image-group img {
  width: 100%;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
}
.case-decision__image-group--tall img,
.case-decision__image-group--tall .case-decision__collage {
  height: 334px;
}
.case-decision__collage {
  position: relative;
  width: 100%;
}
.case-section img.case-decision__collage-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 330.754px;
  height: 282px;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
}
.case-section img.case-decision__collage-popup {
  position: absolute;
  top: 134px;
  left: 256px;
  width: 237.143px;
  height: 200.226px;
  border-radius: 8.571px;
  border: 0.714px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
}
.case-decision__caption {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
}
.case-decision__points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.case-decision__point {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.case-decision__line-wrap {
  display: flex;
  padding: 4px 0;
  align-items: center;
  align-self: stretch;
  flex: none;
}
.case-decision__line-wrap--fixed {
  align-self: auto;
  height: 44px;
}
.case-decision__line {
  width: 3px;
  align-self: stretch;
  border-radius: 99px;
  flex: none;
}
.case-decision__line--bad {
  background: #d99193;
}
.case-decision__line--good {
  background: #8dcf9e;
}
.case-decision__point-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}
.case-decision__point-text p {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-decision__tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-decision__icon {
  flex: none;
  color: #5f5f5f;
}
.case-decision__point-text p.case-decision__tag {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
}

/* -- Damai "Project Gallery Page" decision (Frame 749): current shot |
   callout points | redesign shot, three columns instead of MUJI's two. -- */
.case-pgallery__row {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 40px;
}
.case-pgallery__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
  width: max-content;
}
.case-section .case-pgallery__shot img {
  width: 184px;
  height: 400px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
}
.case-pgallery__callouts {
  flex: 1 0 0;
  align-self: center;
}

/* -- Damai "Layout Design - Favorited Projects" decision (Frame 642):
   2 redesign options, each with a shot + point list + a dashed verdict
   badge underneath. -- */
.case-favorites__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 80px;
}
.case-favorites__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  gap: 24px;
}
.case-favorites__content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.case-favorites__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
  width: max-content;
}
.case-section .case-favorites__shot img {
  width: 184px;
  height: 197px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
}
.case-section .case-favorites__shot--short img {
  height: 176px;
}
.case-favorites__points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 220px;
  flex: none;
  gap: 16px;
}
.case-favorites__point-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}
.case-favorites__point-text p {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-favorites__verdict {
  display: flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--case-callout-bg, #f4f5fd);
  align-self: stretch;
}
.case-favorites__verdict-inner {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  gap: 12px;
}
.case-favorites__verdict-inner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.case-favorites__verdict-inner svg rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 11px;
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 10 10;
  stroke: rgba(102, 101, 254, 0.25);
}
.case-favorites__verdict-inner span {
  position: relative;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}

/* -- Damai "Project Details Page" decision (Frame 642): just 2 shots,
   current vs redesign, no callout points. -- */
.case-pdetails__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 80px;
}

.case-final {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px;
  border-radius: 40px;
  background: var(--case-accent, #8b0013);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  font-family: "Figtree", sans-serif;
}
/* Breaks up banding/dithering that large, flat, deeply saturated fills
   show on most displays -- a subtle noise grain gives the GPU something
   to dither against instead of a perfectly uniform color. */
.case-final::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.case-final__heading-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.case-final__eyebrow {
  margin: 0;
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.42px;
  text-transform: uppercase;
}
.case-final__title {
  margin: 0;
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}
.case-final__summary {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.case-final__summary p {
  margin: 0;
  flex: 1 0 0;
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-final__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
  flex: none;
}
.case-final__compare {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.case-final__current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 400px;
  flex: none;
}
.case-final__current img {
  width: 400px;
  height: 227px;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
  margin: 0;
}
.case-final__redesign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}
.case-final__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}
.case-final__shot img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
  display: block;
  margin: 0;
}
.case-final__shot--hero img { height: 577.87px; }
.case-final__shot--photos img { height: 323px; }
.case-final__shot--stories img { height: 243.41px; border-width: 1.4px; }
.case-final__shot--materials img { height: 399.67px; border-width: 1.4px; }
.case-final__caption {
  margin: 0;
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
}
.case-final__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.case-final__body {
  margin: 0;
  align-self: stretch;
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-final__compare--nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.case-final__nav-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: none;
}
.case-final__nav-col img {
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0;
  height: 123px;
}
.case-final__nav-col--current { width: 327px; }
.case-final__nav-col--current img { width: 327px; }
.case-final__nav-col--redesign { width: 729px; }
.case-final__nav-col--redesign img { width: 729px; }

.case-final__cat-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 400px;
  flex: none;
}
.case-final__cat-current img {
  width: 400px;
  height: 222px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0;
}
.case-final__cat-redesign {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}
.case-final__cat-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}
.case-final__cat-shot img {
  width: 100%;
  height: 355.2px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0;
}
.case-final__cat-shot--keyinfo img { height: 471.7px; }
.case-final__cat-shot--supplementary img { height: 364.38px; }

.case-final__item-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 400px;
  flex: none;
}
.case-final__item-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.case-final__item-shot img {
  width: 400px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0;
}
.case-final__item-shot--info img { height: 170px; }
.case-final__item-shot--details img { height: 187px; }
.case-final__item-shot--popup img { height: 226px; border: 0.714px solid rgba(95, 95, 95, 0.1); }
.case-final__item-shot--address img { height: 227px; border: 1px solid rgba(95, 95, 95, 0.1); }
.case-final__cat-shot--cartdrawer img { height: 355.28px; border: 1px solid rgba(95, 95, 95, 0.1); }
.case-final__cat-shot--shoppingcart img { height: 423.7px; border: 1px solid rgba(95, 95, 95, 0.1); }
.case-final__cat-shot--address img { height: 355.28px; border: 1px solid rgba(95, 95, 95, 0.1); }

/* -- Damai User Groups section (Frame 232): 2 persona blocks + a row of
   4 pain-point cards, measured from Figma. -- */
.case-usergroups__personas {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
}
.case-usergroups__persona {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}
.case-usergroups__avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}
.case-usergroups__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.case-usergroups__avatar-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.case-usergroups__avatar-ring circle {
  stroke: var(--case-accent, #8b0013);
}
.case-usergroups__persona-text h3 {
  margin: 0 0 8px;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}
.case-usergroups__persona-text p {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-usergroups__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(95, 95, 95, 0.25);
  flex: none;
}
.case-usergroups__painpoints {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
}
.case-usergroups__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 250px;
  height: 253px;
  flex: none;
  padding: 16px 16px 20px 16px;
  border-radius: 12px;
  background: var(--case-callout-bg, #f4f5fd);
}
.case-usergroups__card .case-usergroups__number {
  margin: 0;
  color: var(--case-accent, #8b0013);
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-usergroups__card h3 {
  margin: 0 0 8px;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-usergroups__card .case-usergroups__desc {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.case-usergroups__tags {
  display: flex;
  flex: none;
  align-items: center;
  height: 35px;
  gap: 8px;
}
.case-usergroups__tag-icon {
  width: 35px;
  height: 35px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--case-accent, #8b0013);
  object-fit: cover;
}
.case-usergroups__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
}

/* -- Damai Concept Ideation section (Frame 235): heading + wireframe
   screenshot + feedback body copy + a row of 3 event-type cards. -- */
.case-section .case-concept__screenshot {
  width: 100%;
  margin: 0;
  border-radius: 12px;
}
.case-concept-types {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 32px;
}
.case-concept-types__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  padding: 16px 16px 20px 16px;
  border-radius: 12px;
  background: var(--case-callout-bg, #f4f5fd);
  gap: 16px;
}
.case-concept-types__header {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}
.case-concept-types__icon {
  display: flex;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #e9ebfb;
  color: var(--case-accent, #8b0013);
}
.case-concept-types__icon svg {
  width: 24px;
  height: 24px;
}
.case-concept-types__header h3 {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
}
.case-concept-types__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
}
.case-concept-types__body p {
  margin: 0;
  color: #5f5f5f;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}

/* -- Damai "Final Designs" (Frame 259): a single prototype video centered
   in the closing case-final banner, instead of MUJI's image compare grid. -- */
.case-final__video {
  align-self: center;
}
.case-final__video video {
  display: block;
  width: 278px;
  height: 529px;
  border-radius: 40px;
  object-fit: cover;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ---- Inner pages: absolute-positioned canvas (Work, etc.) ---- */
.page-canvas {
  position: relative;
  min-height: 100vh;
  width: 100%;
}
/* Case-study accent color, cascades down to every element that reads
   var(--case-accent, #8b0013) -- eyebrows, CTA, callouts, etc. */
.page-canvas--damai {
  --case-accent: #6665fe;
  --case-callout-bg: #f4f5fd;
}
.page-canvas--wapoo {
  --case-accent: #45dbe9;
  --case-callout-bg: #e2f5f7;
}

/* -- Wapoo Context section media row (Frame 642): logo + caption on the
   left, a tight row of 4 App Store screenshots + a shared caption on the
   right. -- */
.case-wapoo-context__media {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  align-self: stretch;
}
.case-wapoo-context__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
}
.case-wapoo-context__logo img {
  width: 104px;
  height: 105px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0;
}
.case-wapoo-context__gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
}
.case-wapoo-context__gallery-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.case-wapoo-context__gallery-row img {
  width: 184px;
  height: 400px;
  border-radius: 12px;
  border: 1px solid rgba(95, 95, 95, 0.1);
  object-fit: cover;
  margin: 0;
}
/* Invisible spacer that extends the scrollable page 80px past the glass card's
   bottom edge, mirroring the whitespace above the nav bar. Card bottom = nav-bar
   top (142px) + rendered card height (1369px) = 1511px; +80px = 1591px.
   Recompute if the card's top offset or content height changes. */
.page-canvas--work::after {
  content: "";
  position: absolute;
  top: 1591px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.page-nav {
  view-transition-name: page-nav;
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 40px;
}
.page-nav a {
  display: block;
}
.page-nav a svg {
  display: block;
}

.glass-card--work {
  view-transition-name: work-tab;
  position: absolute;
  left: 50%;
  top: 142px;
  transform: translateX(-50%);
  width: 1250px;
  height: auto;
  /* Tier 1 (blur only, no displacement) — this card is large enough that the
     Tier 2 SVG filter chain was still causing noticeable lag in Chrome. */
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
/* Ring re-computed for this card's actual rendered size (1250 x 1369px):
   halfW=625, halfH=684.5 -> angle_TR = arctan(625/684.5) = 42.40deg = 11.8%,
   angle_BL = 180+42.40 = 222.40deg = 61.8%. Recompute again if content height changes. */
.glass-card--work::after {
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 10.7%,
    rgba(255, 255, 255, 0) 11.8%,
    rgba(255, 255, 255, 0.9) 12.9%,
    rgba(255, 255, 255, 0.9) 60.7%,
    rgba(255, 255, 255, 0) 61.8%,
    rgba(255, 255, 255, 0.9) 62.9%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

.glass-card--about {
  view-transition-name: about-tab;
  position: absolute;
  left: 50%;
  top: 142px;
  transform: translateX(-50%);
  width: 1250px;
  height: auto;
  /* Tier 1 (blur only, no displacement), same as Work. */
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
/* TODO: ring (::after) not yet recomputed for this card -- content isn't built out
   yet, so its rendered height is unknown. Recompute corner angles (see the Work
   card's comment above for the method) once content is in place. */

/* Case study sub-pages (MUJI, Damai, Wapoo, ...) reuse the same glass-card
   shell as Work/About -- no view-transition-name, since these aren't part
   of the cross-document transition pairs. */
.glass-card--case {
  position: absolute;
  left: 50%;
  top: 142px;
  transform: translateX(-50%);
  width: 1250px;
  height: auto;
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
/* No ::after ring for this variant yet -- add one (see the Work card's
   comment above for the method) once a second case study needs it. */

/* ---- About page ---- */
.about-photo-strip {
  position: relative;
  align-self: stretch;
  height: 412px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: none; /* TEMP: page-wide blur-off perf test */
  -webkit-backdrop-filter: none; /* TEMP */
  overflow: hidden;
}

.about-header__title {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  font-family: "Figtree", sans-serif;
  font-size: 30px;
  font-weight: 300;
  color: #5f5f5f;
  margin: 0;
}
.about-header__subtitle {
  position: absolute;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #5f5f5f;
  margin: 0;
}

.photo-space__img {
  position: absolute;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}
.photo-space__img--1 {
  width: 200px;
  height: 267px;
  /* Figma reports 176/189 as the post-rotation bounding-box position; these
     top/left values are the pre-rotation frame offset needed so the rendered
     (rotated) bounding box lands at that exact 176/189 spot. */
  top: 187.2px;
  left: 204.5px;
  transform: rotate(-7deg);
  z-index: 2;
  background-image: url("../assets/images/about/photo-1.jpg");
  background-position: 50%;
  background-size: cover;
}
.photo-space__img--1:hover {
  transform: translate(-5px, -5px) rotate(-10deg);
}
.photo-space__img--2 {
  width: 200px;
  height: 269.896px;
  top: 155.4px;
  left: 394.7px;
  transform: rotate(-2deg);
  z-index: 3;
  background-image: url("../assets/images/about/photo-2.jpg");
  background-position: 50%;
  background-size: cover;
}
.photo-space__img--2:hover {
  transform: translate(5px, -5px) rotate(1deg);
}
.photo-space__img--3 {
  width: 200.25px;
  height: 267px;
  top: 201.057px;
  left: 577.855px;
  transform: rotate(1deg);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  z-index: 1;
  /* Frame is exactly 3:4 (200.25x267), matching this image's native 801x1068
     aspect ratio exactly -- so it fills at 100% with zero crop, no need for
     Figma's leftover non-uniform zoom/offset (those were tuned for a
     different image in that frame). */
  background: url("../assets/images/about/photo-3.jpg") no-repeat 0 0 / 100% 100%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  filter: none;
}
.photo-space__img--3:hover {
  transform: translate(5px, -5px) rotate(4deg);
}
.photo-space__img--4 {
  width: 200px;
  height: 300px;
  top: 161.6px;
  left: 770.2px;
  transform: rotate(4deg);
  z-index: 2;
  background-image: url("../assets/images/about/photo-4.jpg");
  background-position: 50%;
  background-size: cover;
}
.photo-space__img--4:hover {
  transform: translate(5px, -5px) rotate(7deg);
}

.about-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-self: stretch;
}
.about-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
  height: 378px;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: none; /* TEMP: page-wide blur-off perf test */
  -webkit-backdrop-filter: none; /* TEMP */
  overflow: visible;
}
.story-card--comics {
  overflow: hidden;
}
.story-card--spacer {
  opacity: 0;
  pointer-events: none;
}
.story-card__desc {
  align-self: stretch;
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #5f5f5f;
  margin: 0;
}
.story-card--note {
  /* Keep the normal 24px card padding (setting it to 0 here triggers a
     reproducible flex-sizing bug where this card's row-mates get stretched
     wider at this card's expense -- confirmed via isolated testing, cause
     not fully understood). Since absolutely-positioned children reference
     the padding box, not the card's true edge, every envelope shape below
     has its bottom/right/left offset shifted by -24px to compensate and
     still land flush with the card's true outer edge. */
  clip-path: inset(0 round 24px);
  cursor: pointer;
}
.story-card--note .story-card__desc {
  text-align: center;
}
.story-card__media {
  position: relative;
  flex: 1 0 0;
  align-self: stretch;
  overflow: visible;
  min-height: 0;
}

/* Org cards (DCC / CVEC / CUSD): logo + team/event photo, both absolutely
   positioned within the media frame, both rendered as full-bleed background
   images (no inset padding/border around the logo). */
.story-card__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 125px;
  height: 125px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}
.story-card__photo {
  position: absolute;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}
.story-card__photo--dcc,
.story-card__photo--cusd {
  width: 294px;
  height: 200px;
  top: 62px;
  left: 13px;
}
.story-card__photo--dcc {
  background-image: url("../assets/images/about/dcc-photo.jpg");
  background-position: 50%;
  background-size: cover;
}
.story-card__photo--cusd {
  left: 21.3px;
  background-image: url("../assets/images/about/cusd-photo.jpg");
  background-position: 50%;
  background-size: cover;
}
.story-card__photo--cvec {
  width: 218px;
  height: 228px;
  top: 34px;
  left: 97.7px;
  background-image: url("../assets/images/about/cvec-photo.jpg");
  background-position: 50%;
  background-size: cover;
}

/* Tote card: 2 photos side by side */
.story-card__media--pair {
  display: flex;
  align-items: stretch;
  align-self: flex-start; /* width: hug contents, not stretched to card width */
  gap: 8px;
  min-height: 0;
}
.story-card__media--pair img {
  height: 100%;
  width: auto;
  object-fit: cover;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}

/* Comics card: 4 photos absolutely positioned directly in the media frame (no wrapper) */
.story-card__comic {
  position: absolute;
  width: 176.04px;
  height: 175.32px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}
.story-card__comic--1 {
  left: 24px;
  top: 87px;
  background-image: url("../assets/images/about/comics-1.jpg");
}
.story-card__comic--2 {
  left: 208px;
  top: 87px;
  background-image: url("../assets/images/about/comics-2.jpg");
}
.story-card__comic--3 {
  left: 208px;
  top: 270px;
  background-image: url("../assets/images/about/comics-3.jpg");
}
.story-card__comic--4 {
  left: 391px;
  top: 270px;
  background-image: url("../assets/images/about/comics-4.jpg");
}

/* Single-photo cards (hometown) */
.story-card__media--single img {
  width: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}

/* Robot card: 2 photos stacked */
.story-card__media--stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}
.story-card__media--stack img {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}
.story-card__media--stack img:first-child {
  height: 143px;
  align-self: stretch;
  width: 100%;
  object-fit: cover;
}
.story-card__media--stack img:last-child {
  height: calc(100% - 151px); /* container height minus image 1 (143px) + gap (8px) */
  width: auto;
  aspect-ratio: 107 / 59;
  flex-shrink: 0;
}

/* Envelope note card: built entirely from CSS/SVG shapes, no image asset.
   All pieces sit directly on .story-card--note (position:relative on the
   base .story-card), not inside their own wrapper frame. Paint order (DOM
   order) back to front: rect (body) -> poly2/poly3 (side flaps) -> poly1
   (top flap) -> card (peeking letter). */
.envelope-shape {
  position: absolute;
}
.envelope-shape--rect {
  width: 280px;
  height: 230px;
  right: 41.666px;
  bottom: -1px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}
.envelope-shape--poly1 {
  width: 260px;
  height: 88px;
  right: 51.666px;
  bottom: -1px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}
.envelope-shape--poly2 {
  width: 142px;
  height: 233px;
  transform: rotate(-90deg);
  right: 87.166px;
  bottom: -48.868px;
  filter: drop-shadow(4px 0 10px rgba(0, 0, 0, 0.15));
}
.envelope-shape--poly3 {
  width: 142px;
  height: 233px;
  transform: scaleX(-1) rotate(-90deg);
  left: 87.172px;
  bottom: -48.868px;
  filter: drop-shadow(-4px 0 10px rgba(0, 0, 0, 0.15));
}
.envelope__card {
  position: absolute;
  left: 71.68px;
  top: 238px;
  width: 220px;
  height: 120px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  transform: translate(0, 0) rotate(0deg);
  will-change: transform;
  transition: transform 0.3s ease;
}
.story-card--note:hover .envelope__card {
  transform: translate(-0.01px, -109px) rotate(5deg);
}
.envelope__card-text {
  color: #5f5f5f;
  font-family: "Homemade Apple", cursive;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.envelope__card-icon-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  align-self: stretch;
}
.envelope__card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}