/* Tubi: original project imagery, amber presentation and a vertical process. */
.project-art.nova { background:radial-gradient(ellipse at 78% 20%,#eabf86 0%,#b67c49 34%,#50301d 78%); overflow:hidden; isolation:isolate; }
.project-art.nova::before,.project-art.nova::after { display:none; }
.tubi-cover-image { position:absolute; width:87%; height:112%; max-width:none; right:-6%; bottom:-9%; object-fit:contain; object-position:right bottom; filter:drop-shadow(-12px 12px 18px #24130955); }
.tubi-cover-logo { position:absolute; left:7%; top:23%; width:58px; height:58px; padding:8px; border-radius:16px; background:#fff1df; z-index:1; }
.tubi-case { color:#fff0dc; }
.tubi-case .project-back { margin-bottom:24px; }
.tubi-hero { position:relative; min-height:560px; height:min(70vh,720px); border-radius:30px; overflow:hidden; isolation:isolate; }
.tubi-hero .detail-art { position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:0; }
.tubi-hero .project-art.nova { position:absolute; inset:0; width:100%; height:100%; border-radius:0; transform:none; background:radial-gradient(ellipse at 78% 32%,#eac492 0%,#bd8751 34%,#704224 62%,#321d12 100%); }
.tubi-hero .tubi-cover-image { width:72%; height:102%; right:-2%; bottom:-5%; }
.tubi-hero .tubi-cover-logo { left:5.5%; top:9%; width:76px; height:76px; border-radius:22px; }
.tubi-hero-copy { position:absolute; left:5.5%; top:36%; width:42%; z-index:2; pointer-events:none; }
.tubi-hero-copy .detail-title { font-size:clamp(64px,8vw,118px); font-weight:400; margin:8px 0 16px; line-height:1; color:#fff1dc; }
.tubi-hero-copy > p:last-child { font-size:clamp(20px,2.6vw,34px); line-height:1.32; color:#fff1dc; }
.tubi-case .case-phase { font-size:14px; letter-spacing:0; font-weight:400; color:#ffca8a; margin:0 0 16px; }
.tubi-hero-copy .case-phase { color:#fff0dc; max-width:220px; }
.case-summary { display:grid; grid-template-columns:1.3fr 1fr; gap:72px; padding:64px 0 88px; align-items:start; }
.case-lead { font-size:clamp(22px,2.4vw,30px); line-height:1.5; margin:0; max-width:680px; }
.case-summary dl { margin:0; display:grid; gap:24px; }
.case-summary dl div { display:grid; grid-template-columns:100px 1fr; gap:24px; }
.case-summary dt { font-size:14px; color:#dbbda0; }
.case-summary dd { font-size:16px; line-height:1.5; margin:0; }
.case-timeline { list-style:none; padding:0; margin:0; position:relative; }
.case-timeline::before { content:''; position:absolute; left:23px; top:22px; bottom:60px; width:1px; background:linear-gradient(#ffb45c88,#ffb45c55 90%,transparent); }
.case-step { display:grid; grid-template-columns:48px minmax(0,1fr); gap:40px; position:relative; padding-bottom:96px; }
.case-node { width:48px; height:48px; background:#6c3517; border-radius:50%; color:#ffe4c2; display:grid; place-items:center; font-size:14px; position:relative; }
.case-step-content { min-width:0; padding-top:8px; }
.tubi-case h2 { font-size:clamp(28px,3.3vw,44px); line-height:1.18; font-weight:400; margin:0 0 24px; max-width:860px; }
.tubi-case h3 { font-size:22px; line-height:1.35; font-weight:600; margin:0 0 16px; }
.case-step-content > p,.case-change > p { font-size:18px; line-height:1.8; max-width:790px; margin:0 0 32px; color:#ebd2b8; }
.case-step-content > .case-phase { font-size:14px; line-height:1.5; }
.tubi-case blockquote { font-size:clamp(23px,3vw,36px); line-height:1.4; margin:32px 0; padding:32px; background:#f28b2c12; border-radius:22px; max-width:850px; color:#ffdcad; }
.case-two,.case-three { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:32px 0; }
.case-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-figure { margin:32px 0; min-width:0; }
.case-two > .case-figure,.case-three > .case-figure { margin:0; }
.case-figure a { display:block; overflow:hidden; border-radius:18px; background:#392316; cursor:zoom-in; }
.case-figure img { display:block; width:100%; height:auto; transition:transform .55s ease; }
.case-figure a:hover img { transform:scale(1.018); }
.case-figure figcaption { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; font-size:14px; line-height:1.5; color:#e4c6a7; }
.case-figure figcaption .icon { width:17px; height:17px; }
.case-brief > div,.case-findings > div { border-radius:22px; padding:32px; background:#ffebd20b; }
.case-brief p,.case-findings p { font-size:16px; line-height:1.75; margin:0; color:#ebd2b8; }
.case-boards { display:grid; grid-template-columns:1fr; }
.case-boards .case-figure:first-child img { max-height:500px; object-fit:contain; background:#f8f8f8; }
.case-link { display:inline-flex; align-items:center; gap:16px; font-size:16px; color:#ffca8a; text-decoration:underline; text-underline-offset:6px; padding:8px 0; }
.case-findings > div > span { display:block; color:#ffb45c; font-size:14px; margin-bottom:16px; }
.case-change { margin-top:48px; }
.case-step-content .case-takeaway { margin-top:40px; padding:32px; background:#ffebd20d; border-radius:20px; }
.tubi-brand { border-radius:28px; background:radial-gradient(ellipse at 50% 55%,#744121 0%,#321a0e 75%); padding:48px 32px 24px; margin:48px 0; text-align:center; }
.tubi-brand #tubi-brand-title { font-weight:400; font-size:clamp(32px,5vw,64px); margin:0 0 16px; }
.tubi-brand > p { color:#e9cdb0; font-size:18px; margin:0; }
.tubi-brand-scene { display:grid; grid-template-columns:1.3fr 1fr 1.1fr; grid-template-rows:220px 135px; align-items:center; gap:24px; margin-top:48px; }
.tubi-message { background:#ffdfaf; color:#41220f; border-radius:20px; font-size:16px; line-height:1.5; padding:16px; display:flex; align-items:center; justify-content:center; gap:8px; }
.tubi-logo { object-fit:contain; flex-shrink:0; }
.tubi-message .tubi-logo { width:42px; height:42px; }
.tubi-category { align-self:start; margin-top:24px; }
.tubi-mascot { justify-self:center; width:min(100%,200px); aspect-ratio:1; background:#ffe7c8; border-radius:30%; display:grid; place-items:center; }
.tubi-mascot .tubi-logo { width:90%; height:auto; }
.tubi-thanks { text-align:left; }
.tubi-thanks strong { font-weight:600; }
.tubi-comment { grid-column:2; flex-direction:column; font-size:14px; align-self:start; }
.case-final-image { margin:0 0 64px; }
.case-final-image img { max-height:650px; object-fit:cover; }
.case-ending { text-align:center; padding:32px 0 80px; }
.case-ending > .tubi-logo { width:68px; height:68px; background:#ffe7c8; border-radius:20px; margin:0 auto 24px; }
.case-ending h2 { margin:0 auto 32px; }
.case-prototype { display:inline-flex; align-items:center; justify-content:center; gap:16px; background:#ffebd2; color:#32190c; padding:16px 32px; border-radius:99px; font-size:16px; font-weight:600; transition:background .25s; }
.case-prototype:hover { background:#ffb45c; }
@media(max-width:900px) {
 .tubi-hero { min-height:450px; height:56vw; }
 .case-summary { gap:32px; grid-template-columns:1fr; padding:40px 0 64px; }
 .case-summary dl { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
 .case-summary dl div { grid-template-columns:1fr; gap:8px; }
 .case-step { gap:24px; padding-bottom:72px; }
 .tubi-brand-scene { gap:16px; grid-template-rows:180px 135px; }
 .tubi-message { font-size:14px; padding:16px; }
}
@media(max-width:600px) {
 .tubi-hero { height:560px; min-height:0; border-radius:22px; }
 .tubi-hero .tubi-cover-image { width:100%; height:75%; bottom:-5%; right:-15%; }
 .tubi-hero .tubi-cover-logo { left:7%; top:5%; width:58px; height:58px; }
 .tubi-hero-copy { left:7%; top:19%; width:84%; }
 .tubi-hero-copy .detail-title { font-size:64px; margin:8px 0 16px; }
 .tubi-hero-copy > p:last-child { font-size:22px; max-width:210px; }
 .tubi-hero-copy .case-phase { font-size:14px; max-width:none; }
 .tubi-hero .project-art.nova { background:radial-gradient(ellipse at 80% 75%,#c68f56,#734727 50%,#321d12 90%); }
 .case-summary dl { grid-template-columns:1fr; }
 .case-summary dl div { grid-template-columns:85px 1fr; }
 .case-step { grid-template-columns:28px minmax(0,1fr); gap:16px; padding-bottom:56px; }
 .case-node { width:28px; height:28px; font-size:14px; }
 .case-timeline::before { left:13px; top:14px; }
 .case-step-content { padding-top:0; }
 .tubi-case h2 { font-size:28px; }
 .tubi-case h3 { font-size:21px; }
 .case-step-content > p,.case-change > p { font-size:16px; line-height:1.75; }
 .tubi-case blockquote { padding:24px; margin:24px 0; font-size:23px; }
 .case-two,.case-three { grid-template-columns:1fr; gap:24px; }
 .case-brief > div,.case-findings > div { padding:24px; }
 .case-figure a { border-radius:12px; }
 .tubi-brand { padding:32px 16px 24px; margin:32px 0; border-radius:20px; }
 .tubi-brand #tubi-brand-title { font-size:32px; }
 .tubi-brand > p { font-size:16px; }
 .tubi-brand-scene { grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; gap:16px; margin-top:32px; }
 .tubi-category { grid-column:1 / -1; margin:0; justify-self:start; max-width:90%; }
 .tubi-mascot { grid-column:1; grid-row:2; max-width:120px; }
 .tubi-thanks { grid-column:2; grid-row:2; flex-direction:column-reverse; gap:0; text-align:center; }
 .tubi-comment { grid-column:1 / -1; justify-self:center; max-width:85%; }
 .tubi-message .tubi-logo { width:34px; height:34px; }
 .case-ending { padding-bottom:48px; }
 .case-prototype { width:100%; padding:16px; }
 .tubi-cover-logo { width:52px; height:52px; }
}
@media(prefers-reduced-motion:reduce) { .case-figure img,.case-prototype { transition:none; } }
/* Smaller process boards and persistent phase labels. */
.project-card .tubi-cover-image { width:100%; height:100%; right:0; bottom:0; object-fit:contain; object-position:center; }
.project-card .tubi-card-logo { position:absolute; top:76px; left:24px; width:52px; height:52px; padding:8px; border-radius:15px; background:#fff1df; z-index:5; transform:translateZ(62px); transition:transform .32s cubic-bezier(.22,.61,.36,1); pointer-events:none; }
.project-card.is-tilting .tubi-card-logo { transform:translateZ(79px); }
.tubi-case { --stage-bg:#28180f; position:relative; isolation:isolate; }
.tubi-case::before { content:''; position:fixed; inset:0; z-index:-1; background:var(--stage-bg); transition:background-color .9s ease; pointer-events:none; }
.tubi-case > .wrap { max-width:1120px; padding-right:64px; }
.tubi-hero-copy > p:last-child { font-size:clamp(20px,2.3vw,28px); max-width:340px; line-height:1.4; }
.case-summary { display:block; padding:32px 0 48px; }
.case-summary dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.case-summary dl div { display:block; }
.case-summary dt { margin-bottom:8px; }
.case-stage { position:relative; }
.case-stage-label { position:fixed; right:26px; top:50%; z-index:8; writing-mode:vertical-rl; text-orientation:mixed; font-size:16px; letter-spacing:0; color:#ffdaaf; opacity:0; transition:opacity .3s; pointer-events:none; }
.case-stage-label.is-visible { opacity:1; }
.case-step { padding-bottom:56px; gap:24px; }
.tubi-case h2 { font-size:clamp(25px,2.7vw,34px); margin-bottom:16px; }
.tubi-case h3 { font-size:20px; }
.case-step-content > p,.case-change > p { font-size:16px; line-height:1.75; margin-bottom:24px; }
.tubi-case blockquote { font-size:20px; line-height:1.65; padding:24px; margin:24px 0; }
.case-figure { max-width:760px; margin:24px auto; }
.case-figure img { max-height:400px; object-fit:contain; }
.case-figure a { background:transparent; }
.case-boards .case-figure:first-child img { max-height:320px; }
.case-boards { grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.case-boards .case-figure { width:100%; }
.case-two,.case-three { gap:16px; margin:24px 0; }
.case-two .case-figure img { max-height:260px; }
.case-three .case-figure img { max-height:180px; }
.case-final-image { max-width:760px; }
.case-final-image img { max-height:420px; object-fit:contain; }
.case-step-content .trim-mockup a { overflow:hidden; }
.case-step-content .trim-mockup img { max-height:none; width:102.6%; max-width:none; margin-left:-.62%; }
.case-step-content .trim-mockup { max-width:640px; }
.tubi-brand { padding:32px 24px; margin:32px 0; }
.tubi-brand #tubi-brand-title { font-size:clamp(28px,3.5vw,44px); }
.tubi-brand-scene { grid-template-rows:auto auto; gap:24px; margin-top:32px; align-items:center; }
.tubi-message { background:#fff; color:#163955; width:fit-content; max-width:100%; padding:16px 16px; gap:8px; border-radius:16px; font-size:14px; margin:0; justify-self:center; }
.tubi-category { align-self:center; }
.tubi-mascot { background:#fff; max-width:145px; }
.tubi-thanks { align-self:center; }
.tubi-comment { grid-column:2; min-width:190px; padding:16px 16px; gap:8px; }
.tubi-message .tubi-logo { width:34px; height:34px; }
.tubi-cover-image[role=button] { cursor:zoom-in; }
.case-preview { width:min(94vw,1500px); max-width:none; max-height:92vh; overflow:auto; padding:24px; border:0; border-radius:18px; background:#29170f; color:#ffe4c2; box-shadow:0 24px 90px #0009; }
.case-preview::backdrop { background:#130b07c9; backdrop-filter:blur(8px); }
.case-preview-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.case-preview-top p { font-size:16px; line-height:1.5; margin:0; }
.case-preview button { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#5a321d; color:#ffe4c2; cursor:pointer; }
.case-preview-media { text-align:center; }
.case-preview-media img { display:block; width:auto; height:auto; max-width:100%; max-height:65vh; margin:auto; object-fit:contain; border-radius:12px; transform-origin:top left; }
.case-preview.is-trimmed .case-preview-media img { clip-path:inset(0 2% 0 .6% round 12px); }
.case-preview-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:16px; font-size:14px; }
@media(max-width:700px) {
 .tubi-case > .wrap { padding-right:32px; }
 .case-stage-label { right:8px; font-size:14px; letter-spacing:0; }
 .case-summary dl { grid-template-columns:1fr; gap:16px; }
 .case-summary dl div { display:grid; grid-template-columns:85px 1fr; gap:16px; }
 .case-step { gap:16px; }
 .case-boards { grid-template-columns:1fr; }
 .case-step-content > p { font-size:16px; }
 .tubi-case blockquote { font-size:18px; padding:24px; }
 .case-three { grid-template-columns:1fr 1fr; }
 .tubi-brand { padding:24px 16px; }
 .tubi-brand-scene { grid-template-columns:1fr 1fr; gap:16px; }
 .tubi-category { grid-column:1 / -1; }
 .tubi-comment { grid-column:1 / -1; min-width:0; }
 .tubi-message { padding:8px 16px; }
 .tubi-mascot { max-width:100px; }
 .project-card .tubi-card-logo { left:18px; top:68px; transform:none; }
 .project-card.is-tilting .tubi-card-logo { transform:none; }
 .case-preview { padding:16px; }
}
@media(prefers-reduced-motion:reduce){.tubi-case::before,.case-stage-label{transition:none;}}
/* More generous finale, quiet left-hand phase rail and enlarged live branding board. */
.tubi-case > .wrap { padding-right:24px; padding-left:88px; }
.case-stage-label { right:auto; left:22px; top:50%; transform:translateY(-50%) rotate(180deg); font-size:clamp(26px,3vw,44px); letter-spacing:0; color:#ffdab14d; font-weight:400; }
.case-stage[data-stage="EMPATHIZE & DEFINE"] .case-node { background:#684321; color:#ffe4b7; }
.case-stage[data-stage="DEVELOP"] .case-node { background:#874122; color:#fff0dc; }
.case-stage[data-stage="DELIVER"] .case-node { background:#655544; color:#ffebd4; }
.case-final-image { max-width:none; width:100%; margin:16px 0 64px; }
.case-final-image img { width:100%; max-height:650px; object-fit:cover; }
.project-card .tubi-cover-image { width:108%; height:108%; right:-1%; bottom:-7%; object-position:center; }
.tubi-hero .tubi-cover-image { right:3%; bottom:-7%; }
.project-card .tubi-card-logo { top:62px; }
.tubi-brand[role="button"] { cursor:zoom-in; }
.case-preview [hidden] { display:none !important; }
.case-preview-brand { width:min(100%,1100px); margin:auto; transform-origin:top left; }
.case-preview-brand .tubi-brand { margin:0; padding:40px 32px; }
.case-preview-brand .tubi-brand > h3 { font-size:clamp(28px,4vw,56px); font-weight:400; margin:0 0 16px; }
.case-preview-brand .tubi-brand-scene { margin-top:32px; }
@media(max-width:700px) {
 .tubi-case > .wrap { padding-left:40px; padding-right:16px; }
 .case-stage-label { left:7px; right:auto; font-size:24px; letter-spacing:0; }
 .project-card .tubi-card-logo { top:58px; }
 .tubi-hero .tubi-cover-image { width:100%; right:-5%; bottom:-7%; }
 .case-final-image img { max-height:none; }
 .case-preview-brand .tubi-brand { padding:24px 16px; }
}
/* Hi-fi gets its own step; fixed navigation stays within reach. */
.project-card .tubi-cover-image { bottom:-19%; }
.tubi-case .project-back { position:sticky; top:var(--case-nav-offset,108px); z-index:20; background:#3c2316f2; color:#fff0dc; padding:16px 16px; border-radius:99px; backdrop-filter:blur(14px); min-height:44px; margin-bottom:24px; }
.case-step-content { padding-top:0; }
.case-step-content > h2 { min-height:48px; display:flex; align-items:center; margin:0 0 8px; }
.case-step-content > .case-phase { margin:0 0 24px; }
.case-stage[data-stage="EMPATHIZE & DEFINE"] .case-node { background:#ffebd2; color:#32190c; }
.case-stage[data-stage="DEVELOP"] .case-node { background:#c45b23; color:#fff8ef; }
.case-stage[data-stage="DELIVER"] .case-node { background:#665451; color:#fff4e6; }
@media(max-width:700px) {
 .tubi-case .project-back { font-size:14px; padding:8px 16px; top:var(--case-nav-offset,90px); }
 .case-step-content > h2 { min-height:28px; font-size:24px; line-height:1.25; }
 .case-step-content > .case-phase { font-size:14px; margin-bottom:16px; }
 .case-two,.case-three { grid-template-columns:1fr; }
 .case-node { align-self:start; }
 .tubi-hero { height:510px; }
 .tubi-hero-copy > p:last-child { max-width:200px; font-size:20px; }
 .case-step-content > p,.case-change > p { overflow-wrap:break-word; }
 .case-stage-label { font-size:22px; max-height:75vh; }
}

/* One quiet mascot replaces the repeating process patterns. */
.tubi-ambient { position:fixed; right:-65px; top:48vh; width:clamp(190px,23vw,320px); height:auto; z-index:-1; opacity:.11; pointer-events:none; filter:sepia(.8) saturate(.55); transform:translate3d(0,var(--tubi-drift,0px),0) rotate(-12deg); }
.project-card .tubi-cover-image { width:auto; height:130%; max-width:none; left:50%; right:auto; top:4%; bottom:auto; transform:translateX(-76%); object-fit:contain; }
.case-summary dl { grid-template-columns:.65fr .65fr 1.2fr 1.2fr; }
@media(max-width:900px) { .case-summary dl { grid-template-columns:1fr 1fr; } }
@media(max-width:700px) { .case-summary dl { grid-template-columns:1fr; } .tubi-ambient { right:-80px; width:220px; opacity:.07; } }
@media(prefers-reduced-motion:reduce) { .tubi-ambient { transform:rotate(-12deg); } }
/* Match the main section titles and use Tubi's supplied silhouette as process markers. */
.tubi-case .case-step-content > h2 { font-size:25px; font-weight:400; line-height:1.3; letter-spacing:0; }
.tubi-case .case-node { position:relative; width:48px; height:48px; background:none !important; border-radius:0; color:#ffe4b7; font-size:18px; font-weight:400; transform:scale(.93); transition:transform .35s,font-weight .35s; }
.case-node > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.case-node > svg path { fill:#674324; stroke:#d7a46e; stroke-width:1.2; transition:stroke-width .35s,fill .35s; }
.case-node > span { position:relative; z-index:1; }
.case-stage[data-stage="DEVELOP"] .case-node > svg path { fill:#ad481c; stroke:#ffbf79; }
.case-stage[data-stage="DELIVER"] .case-node > svg path { fill:#665451; stroke:#d5c6bf; }
.tubi-case .is-current-step .case-node { transform:scale(1.1); font-weight:600; }
.is-current-step .case-node > svg path { stroke-width:3; }
@media(max-width:700px) { .tubi-case .case-step-content > h2 { font-size:22px; min-height:38px; } .case-step { grid-template-columns:38px minmax(0,1fr); } .tubi-case .case-node { width:38px; height:38px; font-size:17px; } .case-timeline::before { left:18px; } }
@media(prefers-reduced-motion:reduce) { .tubi-case .case-node,.case-node > svg path { transition:none; } }