/* Match the G.O.A.T. editorial type hierarchy using the loaded Medium face. */
.case-study[data-case="wannabe"] .wannabe-cover{position:relative}
.case-study[data-case="wannabe"] .wannabe-cover-window{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--case-radius);background:var(--surface)}
.case-study[data-case="wannabe"] .wannabe-cover-image{position:absolute;top:0;left:0;width:100%;height:auto;border-radius:0;object-fit:contain}
.case-study[data-case="wannabe"] #section-05 .wannabe-cover-image{width:calc(100% + 2px);max-width:none}
.case-study[data-case="wannabe"] .wannabe-cover.is-loading img{opacity:0}
.case-study[data-case="wannabe"] .wannabe-cover.is-ready img{transition:opacity 600ms ease;animation:wannabe-cover-pan var(--cover-duration) linear infinite;animation-play-state:paused}
.case-study[data-case="wannabe"] .wannabe-cover.is-running img{animation-play-state:running}
.case-study[data-case="wannabe"] .wannabe-cover-toggle{position:absolute;right:12px;bottom:12px;z-index:1}
.case-study[data-case="wannabe"] .wannabe-cover-play{display:none}
.case-study[data-case="wannabe"] .wannabe-cover.is-paused .wannabe-cover-play{display:block}
.case-study[data-case="wannabe"] .wannabe-cover.is-paused .wannabe-cover-pause{display:none}
@keyframes wannabe-cover-pan{0%{transform:translateY(0)}97.5%,100%{transform:translateY(calc(-1 * var(--cover-distance)))}}
@media(prefers-reduced-motion:reduce){
 .case-study[data-case="wannabe"] .wannabe-cover.is-ready img{animation:none;transition:none}
 .case-study[data-case="wannabe"] .wannabe-cover-window{transition:none;transform:none!important}
}
.case-study[data-case="wannabe"] strong{font-weight:500}
.case-study[data-case="wannabe"] .case-eyebrow{color:var(--muted)}
.case-study[data-case="wannabe"] h1{overflow-wrap:break-word}
.case-study[data-case="wannabe"] .case-footer{font-size:16px;line-height:24px}
/* G.O.A.T. separates the project name, headline and story with 16px / 40px. */
.case-study[data-case="wannabe"] .case-intro .case-meta:has(.case-tags:empty){display:none}
/* Reuse the template metrics scale, with values above their descriptions. */
.case-study[data-case="wannabe"] #impact-title{font-size:20px;line-height:28px;font-weight:500}
.case-study[data-case="wannabe"] #impact-at-a-glance .case-metrics{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px;padding:16px}
.case-study[data-case="wannabe"] #impact-at-a-glance .case-metrics>div{gap:4px;justify-content:flex-start}
.case-study[data-case="wannabe"] #impact-at-a-glance dt{font-size:12px;line-height:20px;font-weight:400}
.case-study[data-case="wannabe"] #impact-at-a-glance dd{order:-1;font-size:20px;line-height:28px;font-weight:500}
@media(max-width:600px){
 .case-study[data-case="wannabe"] #impact-at-a-glance .case-metrics{grid-template-columns:1fr}
}
/* Occupy only the existing left gutter; the centered case column stays intact. */
.case-study[data-case="wannabe"] .wannabe-sidebar{position:absolute;top:0;bottom:0;left:var(--frame-edge);width:min(260px,calc(50vw - var(--frame-edge) - 332px));padding-top:140px}
.case-study[data-case="wannabe"] .wannabe-section-nav{position:sticky;top:140px;max-height:calc(100dvh - 160px);overflow-y:auto;font-size:12px;line-height:20px}
.case-study[data-case="wannabe"] .wannabe-section-nav ul{display:flex;flex-direction:column;gap:8px;padding:0;list-style:none}
.case-study[data-case="wannabe"] .wannabe-section-nav a{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;color:var(--case-muted-text);font-weight:500;text-decoration:none}
.case-study[data-case="wannabe"] .wannabe-section-nav a::before{content:'→';visibility:hidden}
.case-study[data-case="wannabe"] .wannabe-section-nav a[aria-current="location"]{color:var(--text)}
.case-study[data-case="wannabe"] .wannabe-section-nav a[aria-current="location"]::before{visibility:visible}
.case-study[data-case="wannabe"] :is(#overview,#section-01,#section-02,#section-03,#section-04,#section-05,#section-06,#section-07,#section-08,#section-09){scroll-margin-top:120px}
@media(hover:hover) and (pointer:fine){
 .case-study[data-case="wannabe"] .wannabe-section-nav a:hover{color:var(--text)}
}
@media(max-width:1223px){
 .case-study[data-case="wannabe"] .wannabe-sidebar{display:none}
 .case-study[data-case="wannabe"] :is(#overview,#section-01,#section-02,#section-03,#section-04,#section-05,#section-06,#section-07,#section-08,#section-09){scroll-margin-top:80px}
}

/* Reuse case-icon appearance; allow the text label to determine the width. */
.case-study[data-case="wannabe"] .wannabe-cover-case-link{width:auto;align-self:flex-start;margin-top:8px;padding-inline:16px}

/* Hide the export edge inside the Method viewport without moving its window. */
.case-study[data-case="wannabe"] #section-04 .wannabe-cover-image{left:-1px;width:calc(100% + 2px);max-width:none}

.case-study[data-case="wannabe"] #introduction .wannabe-cover.is-ready img,
.case-study[data-case="wannabe"] #section-04 .wannabe-cover.is-ready img{animation-delay:1.5s}

/* Keep the prepared Method action visually consistent while disabled. */
.case-study[data-case="wannabe"] .wannabe-cover-case-link:disabled{opacity:1}

/* Navigation before/after uses the existing panel, type and surface tokens. */
.case-study[data-case="wannabe"] .navigation-comparison{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:8px;align-items:stretch}
.case-study[data-case="wannabe"] .navigation-comparison .case-panel{gap:16px}
.case-study[data-case="wannabe"] .navigation-comparison-label{font-size:12px;line-height:20px;color:var(--case-muted-text)}
.case-study[data-case="wannabe"] .navigation-comparison ul{display:flex;flex-direction:column;gap:8px;padding:0;list-style:none;font-size:12px;line-height:20px}
.case-study[data-case="wannabe"] .navigation-comparison li{align-self:flex-start;max-width:100%;padding:8px 10px;border-radius:8px;background:var(--page-bg)}
.case-study[data-case="wannabe"] .navigation-comparison-after{background:#151719;color:#f4f5f6}
.case-study[data-case="wannabe"] .navigation-comparison-after .navigation-comparison-label{color:#929fb2}
.case-study[data-case="wannabe"] .navigation-comparison-after li{background:#25282b}
.case-study[data-case="wannabe"] .navigation-comparison-arrow{width:16px;height:24px;align-self:center;color:var(--case-muted-text)}
@media(max-width:600px){.case-study[data-case="wannabe"] .navigation-comparison{grid-template-columns:minmax(0,1fr);gap:8px}.case-study[data-case="wannabe"] .navigation-comparison-arrow{justify-self:center;transform:rotate(90deg)}}

/* Clip the Figma section export edge inside the existing media bounds. */
.case-study[data-case="wannabe"] .wannabe-navigation-frame a{display:block;overflow:hidden;border-radius:var(--case-radius)}
.case-study[data-case="wannabe"] .wannabe-navigation-frame a{background:#ccc}
.case-study[data-case="wannabe"] .wannabe-navigation-art{position:relative}
.case-study[data-case="wannabe"] .wannabe-navigation-frame .wannabe-navigation-layouts{transform:scale(1.023);border-radius:0;background:transparent}
.case-study[data-case="wannabe"] .wannabe-navigation-frame .wannabe-navigation-arrow{position:absolute;left:48.444260777572%;top:30.473042545755%;width:3.260288283523%;height:auto;border-radius:0;background:transparent}

/* Static product exhibits share the case media surface and radius. */
.case-study[data-case="wannabe"] .wannabe-product-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.case-study[data-case="wannabe"] .wannabe-product-placeholder{width:100%;aspect-ratio:4/3;background:var(--surface);border-radius:var(--case-radius)}

/* Add live device windows over the existing composition without moving its art. */
.case-study[data-case="wannabe"] .method-scene{position:relative;container-type:inline-size;aspect-ratio:1200/1460;overflow:hidden;border-radius:var(--case-radius);background:linear-gradient(to bottom,#ccc 0%,#ccc 53.424658%,#000 53.424658%,#000 100%)}
.case-study[data-case="wannabe"] .method-scene-label{position:absolute;top:1.369863%;color:#888;font:.75cqw/1.166667cqw monospace;letter-spacing:normal}
.case-study[data-case="wannabe"] .method-label-start{left:1.5%}
.case-study[data-case="wannabe"] .method-label-center{left:50%;transform:translateX(-50%)}
.case-study[data-case="wannabe"] .method-label-end{right:1.5%}
.case-study[data-case="wannabe"] .method-mac{position:absolute;left:15.833333%;top:9.589041%;width:68.333333%;aspect-ratio:1216/734.5}
.case-study[data-case="wannabe"] .method-scene .method-shell{position:absolute;left:8.88%;top:0;width:82.278%;height:93.26%;background:transparent;border-radius:0}
.case-study[data-case="wannabe"] .method-mac-base{position:absolute;left:0;top:93.26%;width:100%;height:6.74%;overflow:hidden}
.case-study[data-case="wannabe"] .method-scene .method-body{position:absolute;left:0;top:-20.2%;width:100%;height:120.2%;background:transparent;border-radius:0}
.case-study[data-case="wannabe"] .method-viewport{position:absolute;left:10.24%;top:2.45%;width:79.52%;height:85.5%;padding:0;border:0;border-radius:0;overflow:hidden;appearance:none;background:#cbec59}
.case-study[data-case="wannabe"] .method-viewport:focus-visible{outline-offset:-2px}
.case-study[data-case="wannabe"] .method-viewport:disabled{opacity:1;cursor:default}
.case-study[data-case="wannabe"] .method-scene .method-desktop{width:100%;height:auto;max-width:none;border-radius:0;background:transparent}
.case-study[data-case="wannabe"] .method-scene.is-ready .method-desktop{animation:method-cover-scroll var(--method-scroll-duration,120s) linear infinite;animation-play-state:paused}
.case-study[data-case="wannabe"] .method-scene.is-running .method-desktop{animation-play-state:running}
.case-study[data-case="wannabe"] .method-scene :is(.method-notch,.method-camera){position:absolute;height:auto;background:transparent;border-radius:0;pointer-events:none}
.case-study[data-case="wannabe"] .method-scene .method-notch{left:44.78%;top:2.45%;width:10.444079%}
.case-study[data-case="wannabe"] .method-scene .method-camera{left:49.68%;top:2.75%;width:.64298%}
.case-study[data-case="wannabe"] .method-phone{position:absolute;width:15%;background:#000}
.case-study[data-case="wannabe"] .method-phone-work{left:11.666667%;top:58.904110%}
.case-study[data-case="wannabe"] .method-phone-about{left:32.916667%;top:58.904110%}
.case-study[data-case="wannabe"] .method-phone-programme{left:76.666667%;top:68.493151%}
/* Reuse the shared case-device shell at the composition's original scale. */
.case-study[data-case="wannabe"] .method-phone .case-device{padding:.5cqw;border-width:.083333cqw;border-radius:3.166667cqw;box-shadow:inset 0 0 0 .166667cqw #34373e,0 .666667cqw 1.333333cqw #0000001a}
.case-study[data-case="wannabe"] .method-phone .case-device-display{padding:1cqw 0 .666667cqw;border-width:.25cqw;border-radius:2.666667cqw;background:#fff}
.case-study[data-case="wannabe"] .method-phone-about .case-device-display{background:#f4aacb}
.case-study[data-case="wannabe"] .method-phone .case-device-display img{height:auto;border-radius:1.833333cqw;background:transparent;object-fit:contain}
.case-study[data-case="wannabe"] .method-phone .case-device-island{top:.333333cqw;height:.75cqw}
.case-study[data-case="wannabe"] .method-phone .case-device-buttons{left:-.25cqw;top:7.833333cqw;width:.166667cqw;height:2.416667cqw;border-radius:.166667cqw;box-shadow:0 3.166667cqw #696d76}
.case-study[data-case="wannabe"] .method-phone .case-device::after{right:-.25cqw;top:9.666667cqw;width:.166667cqw;height:3.666667cqw;border-radius:.166667cqw}
@media(prefers-reduced-motion:reduce){.case-study[data-case="wannabe"] .method-scene .method-desktop{animation:none!important;transform:none}}

/* Preserve the original phone windows while using uncapped Figma image fills. */
.case-study[data-case="wannabe"] .method-phone-work .case-device-display img{aspect-ratio:360/711;object-fit:cover}
.case-study[data-case="wannabe"] .method-phone-about .case-device-display img{aspect-ratio:360/727;object-fit:cover;object-position:left center}
.case-study[data-case="wannabe"] .method-phone-programme .case-device-display img{aspect-ratio:360/713;object-fit:cover}

/* Two continuous, static strips from the supplied B2B page composition. */
.case-study[data-case="wannabe"] .wannabe-b2b-grid{display:grid;grid-template-columns:repeat(2,minmax(0,18%));justify-content:center;align-items:start;align-content:center;gap:0 8%;padding:0;aspect-ratio:5/4;border-radius:var(--case-radius);background:#ccc}
.case-study[data-case="wannabe"] .wannabe-b2b-grid img{display:block;width:100%;height:auto;border-radius:0;background:transparent;object-fit:contain}
.case-study[data-case="wannabe"] .wannabe-b2b-grid img:first-child{margin-top:24px}
@media(max-width:600px){.case-study[data-case="wannabe"] .wannabe-b2b-grid img:first-child{margin-top:12px}}

/* Do not leave an empty hero slot after moving Method into section 04. */
.case-study[data-case="wannabe"] #introduction:not(:has(*)){display:none}

/* B2B keeps the existing devices, with a compact row and native-resolution page. */
.case-study[data-case="wannabe"] #b2b-devices .method-scene{aspect-ratio:1200/1320;background:linear-gradient(to bottom,#ccc 0%,#ccc 59.090909%,#000 59.090909%,#000 100%)}
.case-study[data-case="wannabe"] #b2b-devices .method-mac{top:10.606061%}
.case-study[data-case="wannabe"] #b2b-devices .method-phone{width:18%}
.case-study[data-case="wannabe"] #b2b-devices .method-phone-work{left:16%;top:62.121212%}
.case-study[data-case="wannabe"] #b2b-devices .method-phone-about{left:41%;top:64.393939%}
.case-study[data-case="wannabe"] #b2b-devices .method-phone-programme{left:66%;top:62.121212%}
.case-study[data-case="wannabe"] #b2b-devices .method-viewport,
.case-study[data-case="wannabe"] #b2b-devices .case-device-display{background:#f6f0e4}
/* The display clips the art; no padded inner rectangle or second corner mask. */
.case-study[data-case="wannabe"] #b2b-devices .method-phone .case-device-display{padding:0}
.case-study[data-case="wannabe"] #b2b-devices .b2b-phone-window{position:relative;width:100%;aspect-ratio:360/756;padding:0;overflow:hidden;border-radius:0;background:#f6f0e4}
.case-study[data-case="wannabe"] #b2b-devices .method-phone-about .b2b-phone-window{aspect-ratio:360/772}
.case-study[data-case="wannabe"] #b2b-devices .method-phone-programme .b2b-phone-window{aspect-ratio:360/758}
.case-study[data-case="wannabe"] #b2b-devices .method-phone .case-device-display img{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top;border-radius:0;background:transparent}
.case-study[data-case="wannabe"] #b2b-devices .case-device-island{z-index:1;pointer-events:none}

/* B2B: measured from Figma example 313:11339 (2207px wide). */
.case-study[data-case="wannabe"] .b2b-showcase-preview{display:block;width:100%;aspect-ratio:817/511;padding:0;border:0;border-radius:var(--case-radius);overflow:hidden;background:#ccc;cursor:zoom-in;text-align:initial;appearance:none}
.case-study[data-case="wannabe"] .b2b-composition{display:grid;grid-template-columns:minmax(0,1216fr) minmax(0,243fr);column-gap:8.7555%;align-items:start;padding:13.1391% 17.6257% 15.36% 9.923%;background:#ccc;border-radius:var(--case-radius);color:#000}
.case-study[data-case="wannabe"] :is(.b2b-desktop,.b2b-mobile){position:relative;min-width:0}
.case-study[data-case="wannabe"] .b2b-paper{position:relative;z-index:1;margin-inline:auto}
.case-study[data-case="wannabe"] .b2b-paper>img{display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:0;background:transparent;object-fit:initial;transform:none;animation:none}
.case-study[data-case="wannabe"] .b2b-laptop-hardware{position:absolute;inset:0 0 auto;aspect-ratio:1216/734.5;pointer-events:none}
.case-study[data-case="wannabe"] .b2b-laptop-hardware>.b2b-laptop-shell{position:absolute;left:8.88%;top:0;width:82.278%;height:auto;border-radius:0;background:transparent}
.case-study[data-case="wannabe"] .b2b-laptop-base{position:absolute;left:0;top:93.26%;width:100%;height:6.74%;overflow:hidden}
.case-study[data-case="wannabe"] .b2b-laptop-base>img{position:absolute;top:-20.2%;left:0;width:100%;height:120.2%;max-width:none;border-radius:0;background:transparent}
.case-study[data-case="wannabe"] .b2b-desktop-page{width:79.523%;padding-top:1.48%}
.case-study[data-case="wannabe"] .b2b-mobile-page{width:100%;padding:0;border-radius:0;overflow:hidden}
.case-study[data-case="wannabe"] .b2b-laptop-notch{position:absolute;z-index:2;left:44.78%;top:0;transform:translateY(90%);width:10.44%;height:auto;background:transparent;border-radius:0;pointer-events:none}
/* The same scene expands in the shared viewer; only its one stage scrolls. */
.portfolio-lightbox.is-composition .plb-stage{inset:56px 12px 12px;overflow-x:hidden;overflow-y:auto;touch-action:pan-y pinch-zoom;user-select:auto;scrollbar-color:#929fb2 #151719;scrollbar-width:thin}
.portfolio-lightbox.is-composition .plb-content{position:relative;left:auto;top:auto;width:100%!important;height:auto!important;max-width:1250px;margin:0 auto;transform:none!important;transition:none!important;cursor:default}
@media(max-width:600px){
 .portfolio-lightbox.is-composition .plb-stage{left:6px;right:6px}
 .case-study[data-case="wannabe"] .portfolio-lightbox.is-composition .b2b-composition{grid-template-columns:minmax(0,1fr);gap:40px;padding:28px 18px}
 .case-study[data-case="wannabe"] .portfolio-lightbox.is-composition .b2b-mobile{width:min(100%,300px);justify-self:center}
}

/* Caption shares the existing composition viewer. */
.case-study[data-case="wannabe"] .b2b-showcase-caption{margin:20px 0 0;text-align:center}
.case-study[data-case="wannabe"] .b2b-showcase-expand{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:6px 4px;border:0;background:transparent;color:var(--muted,#8796ad);font:inherit;font-size:14px;line-height:1.5;cursor:pointer;text-underline-offset:4px}
.case-study[data-case="wannabe"] .b2b-showcase-expand svg{flex:none}
@media(hover:hover){.case-study[data-case="wannabe"] .b2b-showcase-expand:hover{color:var(--text,currentColor);text-decoration:underline}}
.case-study[data-case="wannabe"] .b2b-showcase-expand:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

/* Preview is the exact layered Figma export; the viewer contains only original pages. */
.case-study[data-case="wannabe"] .b2b-showcase-preview{aspect-ratio:2207/8285}
.case-study[data-case="wannabe"] .b2b-layered-preview{display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:0;background:#ccc}
.case-study[data-case="wannabe"] .b2b-full-pages{grid-template-columns:minmax(0,1fr) minmax(0,.26fr);column-gap:8%;padding:5% 7%}
.case-study[data-case="wannabe"] .b2b-full-pages .b2b-desktop-page{width:100%;padding:0}

.case-study[data-case="wannabe"] .wannabe-method-cover>.method-description{margin:0 0 20px}

.case-study[data-case="wannabe"] :is(.wannabe-method-cover,.wannabe-b2b-continuous){gap:0}

/* Archive only: reuse Method placement; clip native-width screens inside the device display. */
.case-study[data-case="wannabe"] .wannabe-archive-cover{gap:0}
.case-study[data-case="wannabe"] .archive-description{margin:0 0 20px}
.case-study[data-case="wannabe"] .archive-scene .case-device-island{z-index:1;pointer-events:none}

/* Full Archive mobile page: no decorative edge or fractional clipping of original pixels. */
.case-study[data-case="wannabe"] .archive-full-pages .b2b-mobile-page{overflow:visible;border:0;outline:0;box-shadow:none}
.case-study[data-case="wannabe"] .archive-full-pages .b2b-mobile-page>img{border:0;outline:0;box-shadow:none}

/* AI Product Designer uses B2B's showcase and viewer; only its page length differs. */
.case-study[data-case="wannabe"] .wannabe-ai-product{gap:0}
.case-study[data-case="wannabe"] .ai-product-description{margin:0 0 20px}
.case-study[data-case="wannabe"] .wannabe-ai-product .b2b-showcase-preview{aspect-ratio:2207/13514}

/* Match Method caption typography; keep the product title and summary together. */
.case-study[data-case="wannabe"] .ai-product-summary{display:block;margin-top:4px;font:inherit;color:inherit}

/* Figma Motion reuses AI Product Designer's showcase and shared full-page viewer. */
.case-study[data-case="wannabe"] .wannabe-figma-motion{gap:0}
.case-study[data-case="wannabe"] .wannabe-figma-motion .b2b-showcase-preview{aspect-ratio:2207/7434}

/* Exact Method device geometry: the existing Method screen defines its natural size;
   only Archive's visible screen content is replaced and clipped inside that display. */
.case-study[data-case="wannabe"] .archive-phone-sizing{visibility:hidden;pointer-events:none}
.case-study[data-case="wannabe"] .archive-screen-content{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit;pointer-events:none}
.case-study[data-case="wannabe"] .archive-scene .archive-screen-content>img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:auto;object-fit:initial;transform:none;border-radius:0;background:transparent}

/* Fill Method's existing display windows without resizing the phone bodies. */
.case-study[data-case="wannabe"] .wannabe-method-cover .method-phone-sizing{visibility:hidden;pointer-events:none}
.case-study[data-case="wannabe"] .wannabe-method-cover .case-device-display .method-screen-fill{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center top;border-radius:0;pointer-events:none}
.case-study[data-case="wannabe"] .wannabe-method-cover .case-device-island{z-index:1}


/* Method's live recording fills the existing screen mask; hardware and phones stay fixed. */
.case-study[data-case="wannabe"] .wannabe-method-cover .method-viewport>video{display:block;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover;background:transparent}