@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root{
  --bg:#f7f5ef; --paper:#fffdfa; --ink:#11110f; --muted:#6f6a62; --soft:#8e887f;
  --line:rgba(17,17,15,.10); --display:"Manrope","Inter","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

/* NAV */
.case-nav{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:100;
  display:flex; align-items:center; padding:0 4.8vw;
  background:rgba(247,245,239,.88); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(17,17,15,.07);
}
.case-brand{font:800 22px/1 var(--display);letter-spacing:-.04em}
.case-navlinks{margin-left:auto;display:flex;gap:60px;align-items:center;font-size:15px;font-weight:700}
.case-navlinks a{position:relative;padding:27px 0 24px}
.case-navlinks a:hover{opacity:.52}
.case-navlinks a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:#111;border-radius:2px
}
.case-toggle{display:none;margin-left:auto;border:0;background:none;padding:4px;cursor:pointer}
.case-toggle i{display:block;width:28px;height:2px;background:#111;margin:6px 0}
.case-mobile-nav{
  display:none;position:fixed;top:72px;left:0;right:0;z-index:99;width:100vw;
  background:rgba(247,245,239,.99);border-bottom:1px solid var(--line);padding:0 22px 18px
}
.case-mobile-nav.open{display:block}
.case-mobile-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:650}
.case-mobile-nav a:last-child{border-bottom:0}

/* HERO */
.case-hero{
  min-height:600px;margin-top:72px;padding:110px 24px 90px;
  display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 12% 22%,rgba(239,218,201,.70),transparent 28%),
    radial-gradient(circle at 86% 76%,rgba(218,214,232,.68),transparent 30%),
    radial-gradient(circle at 70% 14%,rgba(218,229,220,.40),transparent 23%),
    linear-gradient(135deg,#f2eee6,#f1efe9 48%,#eef0f3);
}
.case-industrial .case-hero{
  background:
    radial-gradient(circle at 12% 22%,rgba(213,225,218,.72),transparent 28%),
    radial-gradient(circle at 86% 76%,rgba(218,214,232,.66),transparent 30%),
    radial-gradient(circle at 72% 14%,rgba(232,222,206,.38),transparent 24%),
    linear-gradient(135deg,#f2f1eb,#eef1ee 48%,#eff0f4);
}
.case-hero::before,.case-hero::after{
  content:"";position:absolute;pointer-events:none;box-shadow:0 18px 35px rgba(0,0,0,.06)
}
.case-hero::before{
  width:76px;height:54px;border-radius:23px;left:9%;bottom:18%;
  background:linear-gradient(145deg,#dce6df,#bfd0c6);transform:rotate(-13deg)
}
.case-hero::after{
  width:62px;height:62px;border-radius:19px;right:10%;top:20%;
  background:linear-gradient(145deg,#efcdb7,#d9bda8);transform:rotate(12deg)
}
.case-hero-inner{width:min(1040px,92vw);position:relative;z-index:1}
.case-back{
  display:inline-flex;align-items:center;min-height:30px;padding:0 12px;
  border:1px solid rgba(17,17,15,.10);border-radius:999px;background:rgba(255,255,255,.48);
  color:#777169;font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase
}
.case-eyebrow{
  margin:30px 0 12px;color:#817b73;font-size:14px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase
}
.case-hero h1{
  margin:0 auto;max-width:940px;font-family:var(--display);
  font-size:clamp(58px,8vw,108px);line-height:.91;letter-spacing:-.075em
}
.case-hero-sub{margin:28px auto 0;max-width:720px;color:#615d57;font-size:24px;line-height:1.72}

/* COMMON */
.case-shell{width:min(1240px,92vw);margin:0 auto}
.case-section{padding:108px 0}
.case-section.alt{
  background:
    radial-gradient(circle at 13% 18%,rgba(218,228,220,.31),transparent 26%),
    radial-gradient(circle at 88% 84%,rgba(221,216,233,.28),transparent 28%),#f3f1eb
}
.case-section.dark{background:#161615;color:#fff}
.case-head{display:grid;grid-template-columns:150px 1fr;gap:48px;align-items:start;margin-bottom:56px}
.case-num{color:#8f8a81;font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.case-title{
  margin:0;max-width:900px;font-family:var(--display);
  font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-.065em
}
.case-lede{
  grid-column:2;max-width:800px;margin:18px 0 0;color:#68635d;font-size:16px;line-height:1.8
}
.dark .case-lede{color:#b8b6b1}
.case-prose{max-width:800px;color:#5f5b55;font-size:16px;line-height:1.86}
.case-prose strong{color:#111}

/* SNAPSHOT */
.snapshot-section{padding:70px 0 104px}
.snapshot-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.snapshot-head h2{
  margin:0;font-family:var(--display);font-size:clamp(38px,5vw,62px);line-height:1;letter-spacing:-.06em
}
.snapshot-head p{margin:0 0 5px;color:#777169;font-size:18px}
.snapshot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.snap-card{
  min-height:220px;padding:28px;border-radius:26px;border:1px solid var(--line);
  position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(42,38,32,.045)
}
.snap-card::after{
  content:"";position:absolute;width:135px;height:135px;border-radius:50%;
  right:-42px;top:-48px;opacity:.70;filter:blur(3px)
}
.snap-role{
  grid-column:span 4;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(244,236,226,.90))
}
.snap-role::after{background:radial-gradient(circle,#ead3bd,transparent 70%)}
.snap-res{
  grid-column:span 4;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(231,239,233,.92))
}
.snap-res::after{background:radial-gradient(circle,#bcd0c1,transparent 70%)}
.snap-method{
  grid-column:span 4;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(235,231,242,.92))
}
.snap-method::after{background:radial-gradient(circle,#c9c0d8,transparent 70%)}
.snap-industrial .snap-role,.snap-industrial .snap-res{grid-column:span 6}
.snap-label{
  position:relative;z-index:1;margin-bottom:26px;color:#817c74;
  font-size:12px;font-weight:750;letter-spacing:.15em;text-transform:uppercase
}
.snap-role h3{
  position:relative;z-index:1;margin:0 0 8px;
  font-family:var(--display);font-size:26px;line-height:1.05;letter-spacing:-.05em
}
.snap-role p{margin:0;color:#777169;font-size:14px;font-weight:600}
.snap-list{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.snap-list li{font-size:16px;line-height:1.46;font-weight:600}
.team-strip{
  margin-top:16px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.55)
}
.team-left{display:flex;align-items:center;gap:14px}
.team-badge{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#111;color:#fff;font-weight:700}
.team-strip small{
  display:block;margin-bottom:4px;color:#89837b;font-size:9px;font-weight:750;letter-spacing:.14em;text-transform:uppercase
}
.team-strip strong{font-family:var(--display);font-size:20px;letter-spacing:-.03em}

/* MEDIA */
.case-media{
  width:100%;
  height:auto;
  min-height:0;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(17,17,15,.07);
  position:relative;
  line-height:0;
  background:transparent;
  box-shadow:0 24px 64px rgba(42,38,32,.055);
}

/* Keep every original image's natural aspect ratio.
   The frame is sized by the image itself — no cropping. */
.case-media img,
.case-media.contain img,
.case-media.cover img,
.case-media.tall img,
.case-media.small img{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  padding:0;
  object-fit:contain;
  object-position:center;
}

/* Legacy size classes are intentionally neutralized.
   They can remain in the HTML without forcing a fixed image height. */
.case-media.tall,
.case-media.small,
.gallery .case-media{
  min-height:0;
  height:auto;
}

.case-media-label{
  position:absolute;
  left:18px;
  bottom:18px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:9px;
  font-weight:750;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.media-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:16px;
  align-items:start;
}
.media-stack{
  display:grid;
  gap:16px;
  align-content:start;
}
.figure-caption{
  margin-top:12px;
  color:#8b857d;
  font-size:12px;
  line-height:1.4;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* FEATURE ROWS */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  padding:70px 0;border-top:1px solid var(--line)
}
.feature-row:first-of-type{border-top:0}
.feature-row.reverse .feature-copy{order:2}
.feature-row.reverse .case-media{order:1}
.feature-copy .micro{color:#8e887f;font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.feature-copy h3{
  margin:14px 0 18px;font-family:var(--display);
  font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.055em
}
.feature-copy p{margin:0;color:#625e58;font-size:18px;line-height:1.82}

/* METRICS / NOTES */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 64px}
.metric{padding:30px;border-radius:24px;background:#fffdfa;border:1px solid var(--line)}
.metric strong{display:block;font-family:var(--display);font-size:48px;line-height:1;letter-spacing:-.06em}
.metric span{display:block;margin-top:9px;color:#777169;font-size:16px;line-height:1.5}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.sticky-note{
  position:sticky;top:112px;padding:28px;border:1px solid var(--line);
  border-radius:24px;background:rgba(255,255,255,.62)
}
.sticky-note span{display:block;color:#8b857d;font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.sticky-note strong{
  display:block;margin-top:16px;font-family:var(--display);
  font-size:31px;line-height:1.1;letter-spacing:-.045em
}

/* GALLERY + VIDEO */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.gallery .case-media{min-height:0;height:auto}
.gallery .case-media img{min-height:0;height:auto}
.video-cta{
  margin-top:34px;display:inline-flex;align-items:center;min-height:46px;padding:0 18px;
  border:1px solid #111;border-radius:999px;font-size:12px;font-weight:700
}

/* CLOSING */
.case-closing{
  padding:116px 24px;text-align:center;
  background:
    radial-gradient(circle at 14% 22%,rgba(239,217,203,.58),transparent 28%),
    radial-gradient(circle at 84% 78%,rgba(220,216,233,.54),transparent 30%),#f2efe8
}
.case-industrial .case-closing{
  background:
    radial-gradient(circle at 14% 22%,rgba(215,226,218,.58),transparent 28%),
    radial-gradient(circle at 84% 78%,rgba(220,216,233,.54),transparent 30%),#f2f0ea
}
.case-closing small{color:#817b73;font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase}
.case-closing h2{
  margin:18px auto 24px;max-width:820px;font-family:var(--display);
  font-size:clamp(44px,6vw,74px);line-height:.98;letter-spacing:-.065em
}
.case-closing p{max-width:720px;margin:0 auto 30px;color:#635f59;font-size:18px;line-height:1.76}
.case-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;
  border:1px solid #111;border-radius:999px;font-size:14px;font-weight:700
}

/* FOOTER */
.case-footer{padding:58px 5vw 28px;background:#191918;color:#fff}
.case-footer-inner{width:min(1120px,100%);margin:0 auto}
.case-footer h3{margin:0;font-family:var(--display);font-size:25px;letter-spacing:-.04em}
.case-footer p{margin:12px 0 34px;max-width:370px;color:#bbb;font-size:13px;line-height:1.6}
.case-footer-bottom{border-top:1px solid rgba(255,255,255,.10);padding-top:20px;color:#8d8d88;font-size:10px}

/* CURSOR */
.case-cursor{
  position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(164,178,213,.14),rgba(220,216,198,.06) 52%,transparent 74%);
  filter:blur(8px)
}

/* RESPONSIVE */
@media(max-width:900px){
  .case-navlinks{display:none}.case-toggle{display:block}
  .case-head{grid-template-columns:1fr;gap:12px}.case-lede{grid-column:1}
  .snap-role,.snap-res,.snap-method{grid-column:span 12}
  .two-col,.feature-row{grid-template-columns:1fr;gap:34px}
  .feature-row.reverse .feature-copy,.feature-row.reverse .case-media{order:initial}
  .sticky-note{position:static}.metric-grid{grid-template-columns:1fr}.media-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .case-nav{padding:0 22px}.case-brand{font-size:20px}
  .case-hero{min-height:520px;padding:80px 22px 72px}.case-hero h1{font-size:clamp(48px,14vw,66px)}
  .case-shell{width:calc(100vw - 44px)}.case-section{padding:78px 0}
  .snapshot-section{padding:48px 0 78px}.snapshot-head{align-items:flex-start;flex-direction:column}
  .snap-card{padding:24px;min-height:0;border-radius:22px}.team-strip{align-items:flex-start;gap:16px;flex-direction:column}
  .case-title{font-size:44px}.case-lede,.case-prose{font-size:18px}
  .case-media,.case-media.tall{min-height:0;height:auto;border-radius:14px}
  .case-media img,.case-media.tall img{min-height:0;height:auto}
  .feature-row{padding:54px 0}.gallery{grid-template-columns:1fr}
  .case-closing{padding:88px 22px}
}


/* Original video blocks restored from the original HTML reference set */
.original-video-section{
  padding:90px 24px;
  background:#f7f5ef;
}
.original-video-inner{
  width:min(1120px,88vw);
  margin:0 auto;
}
.original-video-kicker{
  margin:0 0 12px;
  color:#8b857d;
  font-size:10px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.original-video-inner h2{
  margin:0 0 34px;
  color:#11110f;
  font-family:var(--display, "Manrope","Inter",sans-serif);
  font-size:clamp(38px,5vw,62px);
  line-height:1;
  letter-spacing:-.055em;
}
.original-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:26px;
  background:#111;
  box-shadow:0 22px 58px rgba(36,32,26,.08);
  margin-top:18px;
}
.original-video-frame iframe{
  width:100%;
  height:100%;
  border:0;
}
.original-reference-preserve{
  display:none !important;
}
@media(max-width:680px){
  .original-video-section{padding:70px 22px}
  .original-video-inner{width:100%}
  .original-video-frame{border-radius:20px}
}


/* Direct in-page project video */
.case-video-block{
  margin-top:42px;
}
.case-video-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:14px;
}
.case-video-head p{
  margin:0;
  color:#11110f;
  font:750 20px/1.2 var(--display);
  letter-spacing:-.035em;
}
.case-video-head span{
  color:#8a857d;
  font-size:11px;
}
.case-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius: 18px;
  background:#111;
  box-shadow:0 24px 64px rgba(42,38,32,.07);
}
.case-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
@media(max-width:680px){
  .case-video-head{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .case-video-frame{
    border-radius: 14px;
  }
}


/* =========================================================
   GuestWhat / UX case study — image-first editorial layout
   UX screenshots, research artifacts and flows need room to read.
   ========================================================= */
.case-startup .case-shell{
  width:min(1240px,92vw);
}

/* Outcome: lead visual full-width, supporting visuals below */
.case-startup .media-grid{
  grid-template-columns:1fr;
  gap:22px;
}
.case-startup .media-grid > div:first-child{
  width:100%;
}
.case-startup .media-stack{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  align-items:start;
}

/* UX sections: copy first, image full-width underneath */
.case-startup .feature-row,
.case-startup .feature-row.reverse{
  display:block;
  padding:84px 0;
}
.case-startup .feature-row .feature-copy,
.case-startup .feature-row.reverse .feature-copy{
  width:min(760px,100%);
  max-width:760px;
  margin:0 0 36px;
}
.case-startup .feature-row.reverse .feature-copy,
.case-startup .feature-row.reverse .case-media{
  order:initial;
}
.case-startup .feature-row .case-media{
  width:100%;
  margin:0;
  background:rgba(255,255,255,.42);
}
.case-startup .feature-row .case-media img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Give UI/research artifacts breathing room */
.case-startup .case-media{
  border-radius:18px;
}
.case-startup .case-media-label{
  left:16px;
  bottom:16px;
}

/* Keep section copy readable while the media can go wide */
.case-startup .case-head{
  grid-template-columns:130px minmax(0,820px);
  justify-content:start;
}
.case-startup .case-lede{
  max-width:820px;
}

/* Research / blueprint / UI visuals should never inherit a cramped column */
.case-startup .case-media.contain,
.case-startup .case-media.tall{
  width:100%;
  max-width:none;
}

/* Slightly stronger separation between consecutive UX artifacts */
.case-startup .feature-row + .feature-row{
  border-top:1px solid rgba(17,17,15,.10);
}

@media(max-width:900px){
  .case-startup .case-shell{
    width:calc(100vw - 44px);
  }
  .case-startup .case-head{
    grid-template-columns:1fr;
  }
  .case-startup .media-stack{
    grid-template-columns:1fr;
  }
  .case-startup .feature-row,
  .case-startup .feature-row.reverse{
    padding:64px 0;
  }
  .case-startup .feature-row .feature-copy,
  .case-startup .feature-row.reverse .feature-copy{
    margin-bottom:28px;
  }
}

@media(max-width:560px){
  .case-startup .feature-row,
  .case-startup .feature-row.reverse{
    padding:52px 0;
  }
  .case-startup .case-media{
    border-radius:14px;
  }
}


/* Unified Case Study width — UX/UI + Industrial Design */
.case-startup .case-shell,
.case-industrial .case-shell{
  width:min(1240px,92vw);
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}


/* GuestWhat — Core Features use a compact split layout */
.case-startup .feature-row.compact-split,
.case-startup .feature-row.reverse.compact-split{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:56px;
  align-items:center;
  padding:76px 0;
}

.case-startup .feature-row.compact-split .feature-copy,
.case-startup .feature-row.reverse.compact-split .feature-copy{
  width:auto;
  max-width:none;
  margin:0;
}

.case-startup .feature-row.compact-split .case-media{
  width:100%;
  margin:0;
}

/* Preserve the original alternating rhythm */
.case-startup .feature-row.reverse.compact-split .feature-copy{
  order:2;
}
.case-startup .feature-row.reverse.compact-split .case-media{
  order:1;
}

/* Images stay readable without becoming full-page large */
.case-startup .feature-row.compact-split .case-media img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}

.case-startup .feature-row.compact-split .feature-copy h3{
  font-size:clamp(34px,3.6vw,48px);
}

@media(max-width:900px){
  .case-startup .feature-row.compact-split,
  .case-startup .feature-row.reverse.compact-split{
    grid-template-columns:1fr;
    gap:28px;
    padding:58px 0;
  }

  .case-startup .feature-row.reverse.compact-split .feature-copy,
  .case-startup .feature-row.reverse.compact-split .case-media{
    order:initial;
  }
}