/* Freshness-only refinement. Preserve the shared portfolio and source artwork. */
.freshness-case-study {
  --fresh-ink: #101216;
  --fresh-accent: #387458;
  --fresh-body: #505b6c;
}

/* Reuse the homepage CTA, with a backward arrow and no project-card spacing. */
.freshness-case-study .case-back.work-project-link {
  --project-accent:#389978;
  margin-top:0;
  padding-bottom:.52rem;
  border-bottom:0;
  text-decoration:none;
  gap:.68rem;
  color:var(--portfolio-ink);
  font-size:1.125rem;
  font-weight:650;
  line-height:1.25;
  transition:color .2s var(--ease-out);
}
.freshness-case-study .case-back.work-project-link > span {
  display:inline-block;
  font-size:1.2rem;
  transition:transform .25s var(--ease-out);
}
.freshness-case-study .case-back.work-project-link:is(:hover,:focus-visible) { color:var(--fresh-accent); }
.freshness-case-study .case-back.work-project-link:focus-visible { outline-color:var(--fresh-accent); }
.freshness-case-study .case-back.work-project-link:hover > span { transform:translateX(-2px); }
.freshness-case-study .case-back.work-project-link:active > span { transform:translateX(-1px); }
@media (max-width:1121px) {
  .freshness-case-study .case-back.work-project-link { font-size:1rem; }
}
@media (prefers-reduced-motion:reduce) {
  .freshness-case-study .case-back.work-project-link,
  .freshness-case-study .case-back.work-project-link > span { transition:none; }
  .freshness-case-study .case-back.work-project-link:is(:hover,:active) > span { transform:none; }
}

/* Reuse the original Mutton device geometry, not a second CSS-built phone. */
.freshness-case-study .fresh-device-scene .case-scene-aura {
  background: radial-gradient(ellipse, rgb(207 231 218 / 50%), transparent 70%);
}
.freshness-case-study .fresh-device-scene .case-hero-preview { width:70%; left:25%; top:-6%; }
.freshness-case-study .fresh-device-scene .case-scene-note { top:12%; left:-1%; width:160px; }
.freshness-case-study .fresh-device-scene .case-handwriting { display:block; color:var(--fresh-accent); }
.freshness-case-study .fresh-device-scene .case-scene-note svg { display:block; }

/* Retain the homepage's Freshness props and materials around the shared phone. */
.freshness-case-study .fresh-hero-prop { position:absolute; display:block; z-index:3; pointer-events:none; }
.freshness-case-study .fresh-hero-camera { left:7%; top:57%; width:27%; rotate:-8deg; filter:drop-shadow(0 12px 14px rgb(72 100 88 / 13%)); }
.freshness-case-study .fresh-hero-camera img { display:block; width:100%; height:auto; }
.freshness-case-study .fresh-hero-batch-tag { right:0; top:12%; rotate:10deg; }
.freshness-case-study .freshness-batch-tag { display:flex; align-items:center; gap:10px; padding:12px 16px; color:#617d6c; background:linear-gradient(145deg,#fff,#f4f7f1); border:1px solid #e6ece3; border-radius:17px; box-shadow:0 14px 24px -9px rgb(76 111 89 / 16%); font-size:13px; line-height:1.4; }
.freshness-case-study .freshness-batch-tag svg { width:27px; height:27px; }
.freshness-case-study .freshness-batch-tag strong { font-weight:650; }
.freshness-case-study .fresh-hero-clock { right:1%; top:67%; width:68px; height:68px; rotate:12deg; }
.freshness-case-study .freshness-clock-tile { display:grid; place-items:center; width:100%; height:100%; border-radius:21px; background:linear-gradient(145deg,#fff,#eff8f2); border:1px solid #dfebe3; box-shadow:0 15px 24px -8px rgb(76 111 89 / 18%),inset -2px -3px 4px #e4eee6; }
.freshness-case-study .freshness-clock-tile i { display:block; position:relative; width:33px; height:33px; border:2px solid #65977b; border-radius:50%; }
.freshness-case-study .freshness-clock-tile i::before,.freshness-case-study .freshness-clock-tile i::after { content:""; position:absolute; width:2px; left:14px; top:6px; height:10px; background:#65977b; border-radius:2px; transform-origin:50% 100%; }
.freshness-case-study .freshness-clock-tile i::after { top:9px; height:7px; rotate:120deg; }
.freshness-case-study .fresh-hero-prop > :first-child { animation:fresh-hero-prop-drift 4s ease-in-out infinite; animation-play-state:paused; }
.freshness-case-study .fresh-hero-camera > :first-child { animation-delay:-.8s; }
.freshness-case-study .fresh-hero-batch-tag > :first-child { animation-delay:-1.6s; }
.freshness-case-study .fresh-hero-clock > :first-child { animation-delay:-3s; }
.freshness-case-study .fresh-device-scene.is-motion-active .fresh-hero-prop > :first-child { animation-play-state:running; }
.freshness-case-study.case-motion-paused .fresh-hero-prop > :first-child { animation-play-state:paused; }
@keyframes fresh-hero-prop-drift { 0%,100% { translate:0 0; } 50% { translate:3px -8px; } }
@media (max-width:600px) {
  .freshness-case-study .fresh-hero-camera { left:3%; top:57%; }
  .freshness-case-study .fresh-hero-batch-tag { top:5%; }
  .freshness-case-study .freshness-batch-tag { padding:9px 11px; gap:7px; font-size:11px; }
  .freshness-case-study .freshness-batch-tag svg { width:23px; height:23px; }
  .freshness-case-study .fresh-hero-clock { width:54px; height:54px; right:0; top:72%; }
}
@media (prefers-reduced-motion:reduce) {
  .freshness-case-study .fresh-hero-prop > :first-child { animation:none; }
}

/* The conclusion of the definitions is a takeaway, not a small caption. */
.freshness-case-study .fresh-conversation-close { max-width:850px; margin:20px auto 0; text-align:center; }
.freshness-case-study .fresh-conversation-close strong {
  display:block; margin:0; color:var(--fresh-ink); font-size:clamp(1.65rem,2.8vw,2.5rem);
  line-height:1.25; letter-spacing:-.025em; font-weight:650;
}
.freshness-case-study .fresh-conversation-close p + p { margin-top:18px; }
.freshness-case-study .fresh-conversation-close em { font-style:normal; color:var(--fresh-accent); font-weight:600; }

/* Heard / saw and their absence are one argument with a subordinate conclusion. */
.freshness-case-study .fresh-trust { padding-block:64px 40px; }
.freshness-case-study .fresh-trust > .fresh-heading { text-align:left; max-width:850px; margin-bottom:36px; }
.freshness-case-study .fresh-trust > .fresh-heading p { max-width:640px; margin-top:20px; }
.freshness-case-study .fresh-trust-scene { margin:0 auto; max-width:930px; }
.freshness-case-study .fresh-trust-icon { width:64px; }
.freshness-case-study .fresh-trust-cue h3 { font-size:clamp(1.5rem,2.5vw,2rem); }
.freshness-case-study .fresh-trust-cue p { font-size:1.125rem; }
.freshness-case-study .fresh-doubt-scene {
  grid-template-columns:.8fr 1.2fr; gap:7%; max-width:1000px; margin:28px auto 0;
  padding-top:28px; border-top:1px solid #dce5df;
}
.freshness-case-study .fresh-doubt-visual { height:300px; }
.freshness-case-study .fresh-doubt-character { width:124px; left:calc(50% - 62px); top:18px; }
.freshness-case-study .fresh-missing { font-size:1rem; color:#5e6c62; }
.freshness-case-study .fresh-missing--one { top:72px; left:0; }
.freshness-case-study .fresh-missing--two { top:20px; right:0; }
.freshness-case-study .fresh-missing--three { bottom:50px; left:0; }
.freshness-case-study .fresh-missing--four { bottom:38px; right:0; }
.freshness-case-study .fresh-doubt-copy h3 { font-size:clamp(1.6rem,2.5vw,2rem); line-height:1.2; }
.freshness-case-study .fresh-doubt-copy > p:not(.case-kicker) { font-size:1.125rem; max-width:470px; margin-top:18px; }
.freshness-case-study .fresh-doubt-copy .case-kicker { margin-bottom:12px; }

/* Labels share a row. The comparison sits exactly between the two claims. */
.freshness-case-study .fresh-claim-gap {
  display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  grid-template-rows:auto auto; align-items:center; gap:18px 24px;
  max-width:1080px; margin:0 auto; text-align:center;
}
.freshness-case-study .fresh-claim-gap > .fresh-claim-side { display:contents; }
.freshness-case-study .fresh-claim-label { display:block; margin:0; font-size:1.125rem; font-weight:400; line-height:1.5; letter-spacing:0; color:var(--fresh-body); }
.freshness-case-study .fresh-claim-side:first-child .fresh-claim-label { grid-column:1; grid-row:1; }
.freshness-case-study .fresh-claim-side:last-child .fresh-claim-label { grid-column:3; grid-row:1; }
.freshness-case-study .fresh-claim-side:first-child strong { grid-column:1; grid-row:2; }
.freshness-case-study .fresh-claim-side:last-child strong { grid-column:3; grid-row:2; }
.freshness-case-study .fresh-claim-gap strong { display:block; margin:0; font-size:clamp(1.8rem,3.5vw,3rem); line-height:1.2; font-weight:650; letter-spacing:-.035em; color:var(--fresh-ink); }
.freshness-case-study .fresh-claim-gap i { grid-column:2; grid-row:2; font-size:2.75rem; font-style:normal; line-height:1; color:var(--fresh-accent); }
.freshness-case-study .fresh-reframe { margin-block:8px 0; }
.freshness-case-study .fresh-criteria .fresh-heading { max-width:820px; }
.freshness-case-study .fresh-evidence-route { margin-top:42px; }

/* Research becomes a question before any feature-level explanation appears. */
.freshness-case-study .fresh-decisions-intro {
  margin-block:24px; padding:52px 48px; border-radius:28px; background:#f0f5f1;
}
.freshness-case-study .fresh-decisions-intro h2 { max-width:980px; }
.freshness-case-study .fresh-decisions-intro > p:not(.case-kicker) { max-width:710px; }
.freshness-case-study .fresh-architecture .fresh-heading { max-width:850px; margin-bottom:40px; }
.fresh-architecture-map { display:grid; grid-template-columns:1fr 3fr; gap:42px; }
.fresh-architecture-route--stories { border-right:1px solid #dce5df; padding-right:36px; }
.freshness-case-study .fresh-route-label { font-size:1.125rem; color:var(--fresh-body); margin-bottom:28px; }
.fresh-architecture-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; list-style:none; margin:0; padding:0; }
.fresh-architecture-node { position:relative; }
.fresh-architecture-node > span { display:block; font-size:1rem; color:var(--fresh-accent); margin-bottom:12px; }
.freshness-case-study .fresh-architecture-node h3 { font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.25; letter-spacing:-.025em; }
.freshness-case-study .fresh-architecture-node p { margin-top:14px; font-size:1.125rem; line-height:1.5; }
.fresh-architecture-steps li + li::before { content:'→'; position:absolute; left:-28px; top:34px; font-size:1.25rem; color:#739681; }

/* Presentation art is already at its original resolution. Avoid enlarging
   the small embedded character and icons beyond their useful detail. */
@media (min-width:901px) {
  .freshness-case-study .fresh-trust-scene { grid-template-columns:1fr 180px 1fr; }
  .freshness-case-study .fresh-trust-character { width:180px; }
  .freshness-case-study .fresh-designer-art { width:110px; margin-inline:auto; }
  .freshness-case-study .fresh-criteria-icon { width:84px; }
}

/* Exact native UI overlay: the original 1080×2400 screen stays untouched.
   Track: x333, y1731, 96×12. A 24px green fill is 25% of that track.
   Attach to the image plane so the crop, rotation and lightbox all agree. */
.freshness-case-study .fresh-stock-layer { display:block; position:relative; }
.freshness-case-study .fresh-stock-layer:not(.fresh-stock-layer--dialog)::after,
.freshness-case-study .fresh-stock-layer--dialog:has(img[src$="/todays-batch-3x.webp"])::after {
  content:""; position:absolute; pointer-events:none;
  left:30.8333333333%; top:72.125%; width:calc(8.8888888889% * .25); height:.5%;
  border-radius:999px; background:#01ae3d;
}
.freshness-case-study .fresh-detail-card .fresh-stock-layer {
  position:absolute; width:200%; left:0; top:-100.6098%; aspect-ratio:9/20;
}
.freshness-case-study .fresh-detail-card .fresh-stock-layer img {
  position:static; width:100%; max-width:100%; height:auto;
}
.freshness-case-study .fresh-stock-layer--dialog { width:fit-content; max-width:min(100%,540px); margin-inline:auto; }
.freshness-case-study .fresh-stock-layer--dialog img { max-width:100%; }

@media (max-width:900px) {
  .freshness-case-study .fresh-device-scene { max-width:460px; margin-inline:auto; aspect-ratio:.94; }
  .freshness-case-study .fresh-device-scene .case-hero-preview { width:66%; left:29%; top:0; }
  .freshness-case-study .fresh-device-scene .case-scene-note { width:130px; left:0; top:14%; }
  .freshness-case-study .fresh-device-scene .case-handwriting { font-size:1rem; }
  .freshness-case-study .fresh-doubt-scene { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:28px; }
  .freshness-case-study .fresh-doubt-visual { width:100%; max-width:330px; }
  .freshness-case-study .fresh-doubt-copy .case-kicker { font-size:.75rem; }
  .freshness-case-study .fresh-architecture-map { grid-template-columns:1fr; gap:32px; }
  .freshness-case-study .fresh-architecture-route--stories { border-right:0; border-bottom:1px solid #dce5df; padding:0 0 28px; }
  .freshness-case-study .fresh-architecture-route--stories .fresh-architecture-node p br { display:none; }
  .freshness-case-study .fresh-route-label { margin-bottom:20px; }
  .freshness-case-study .fresh-decisions-intro { padding:36px 28px; }
}
@media (min-width:601px) and (max-width:900px) {
  .freshness-case-study .fresh-trust-scene { grid-template-columns:1fr 150px 1fr; align-items:center; }
  .freshness-case-study .fresh-trust-character { width:150px; grid-column:auto; grid-row:auto; }
}
@media (max-width:600px) {
  .freshness-case-study .fresh-trust { padding-block:48px 20px; }
  .freshness-case-study .fresh-trust > .fresh-heading { margin-bottom:30px; }
  .freshness-case-study .fresh-trust-scene { gap:24px 16px; }
  .freshness-case-study .fresh-doubt-scene { grid-template-columns:1fr; gap:20px; margin-top:24px; }
  .freshness-case-study .fresh-doubt-copy { grid-row:1; }
  .freshness-case-study .fresh-doubt-visual { height:284px; }
  .freshness-case-study .fresh-conversation-close { margin-top:32px; }
  .fresh-desktop-break { display:none; }
  .freshness-case-study .fresh-claim-gap { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:12px 8px; }
  .freshness-case-study .fresh-claim-label { font-size:.9375rem; }
  .freshness-case-study .fresh-claim-gap strong { font-size:clamp(1.3rem,5vw,1.8rem); }
  .freshness-case-study .fresh-claim-gap i { font-size:1.8rem; }
  .freshness-case-study .fresh-reframe { text-align:center; }
  .freshness-case-study .fresh-reframe > p:last-child br { display:none; }
  .freshness-case-study .fresh-decisions-intro { margin-block:12px; padding:30px 22px; border-radius:22px; }
  .freshness-case-study .fresh-decisions-intro h2 br { display:none; }
  .freshness-case-study .fresh-architecture-steps { grid-template-columns:1fr; gap:32px; }
  .freshness-case-study .fresh-architecture-steps li { padding-left:30px; }
  .freshness-case-study .fresh-architecture-steps li + li::before { content:'↓'; left:22px; top:-29px; }
  .freshness-case-study .fresh-architecture-node h3 { font-size:1.5rem; }
  .freshness-case-study .fresh-architecture-node p { font-size:1.0625rem; }
  .freshness-case-study .fresh-architecture-node p br { display:none; }
}