/* Inset media and a shared brand/title footer for homepage case studies. */
#work .projects{gap:32px}
#work .project{display:block;min-width:0;padding:14px;background:var(--surface);border:0;border-radius:var(--card-radius);overflow:hidden;transition:box-shadow .2s}
#work .project:hover{box-shadow:0 12px 32px #0002}
#work .project>.project-image,#work .project>.mvc-home-demo{border-radius:10px;overflow:hidden;margin:0}
#work .project-info{display:block;padding:26px 18px 18px}
#work .project-brand{display:flex;align-items:center;gap:18px;min-height:48px}
#work .project-brand .eyebrow{margin-left:auto;text-align:right;flex:1;min-width:0;font-size:10px;line-height:1.5;color:var(--muted);letter-spacing:.09em}
#work .project-logo{display:block;flex:none;position:relative;overflow:hidden;width:76px;height:44px}
#work .project-logo img{position:absolute;left:0;top:50%;width:auto;height:auto;max-width:none;transform:translateY(-50%);transform-origin:left center}
#work .project-logo--food{width:45.864px;height:48.048px}
#work .project-logo--food img{scale:.52416}
#work .project-logo--disney img{scale:.5194}
#work .project-logo--cnn{width:58px}
#work .project-logo--cnn img{width:58px}
#work .project-logo--nbcu{width:164px;height:auto;aspect-ratio:348.271 / 64.42}
#work .project-logo--nbcu img{width:114.68%;height:auto;left:-7.34%;top:50%;transform:translateY(-50%)}
#work .project-logo--mvc{width:97.75px}
#work .project-logo--mvc img{width:97.75px;max-height:35.7px;object-fit:contain}
#work .project-info h2{font-family:Inter,Arial,sans-serif;font-weight:500;font-style:normal;letter-spacing:-.04em;font-size:clamp(30px,3.2vw,48px);line-height:1.1;margin:20px 0 0;color:var(--text)}
#work .featured .project-info h2{font-size:clamp(34px,4.2vw,60px)}
@media(max-width:700px){#work .project{padding:9px;border-radius:var(--card-radius)}#work .project>.project-image,#work .project>.mvc-home-demo{border-radius:10px}#work .project-info{padding:8px 0 15px}#work .project-brand{gap:14px;flex-wrap:wrap}#work .project-info h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){#work .project{transition:none}}
#work .project-logo--food img{top:1px;transform:none;transform-origin:top left}
#work .project-logo--disney img{top:1px;transform:none;transform-origin:top left}

.home-page>.site-header{border-bottom:0}

/* Center the homepage introduction now that it has no accompanying image. */
.home-page .hero{grid-template-columns:1fr;text-align:center;justify-items:center}
.home-page .hero-copy{width:100%;max-width:960px}
.home-page .hero .intro{margin-inline:auto}
.home-page .hero-foot{display:flex;justify-content:center;flex-wrap:wrap}
.home-page .hero-foot>span{margin-top:0}

/* NBCUniversal thumbnail, Figma 2854:9108, 680 by 469 canvas. */
#work .nbcu-figma-preview{position:relative;aspect-ratio:680/469;background:#191f22}
.nbcu-thumbnail-layers{position:absolute;inset:0;transition:transform .35s ease}
#work .project:hover .nbcu-thumbnail-layers{transform:scale(1.025)}
#work .nbcu-figma-preview img{position:absolute;max-width:none;object-fit:fill;transition:none}
#work .nbcu-figma-preview .nbcu-thumb-glow-right,#work .project:hover .nbcu-figma-preview .nbcu-thumb-glow-right{left:70.771034%;top:-38.322089%;width:58.422637%;height:160.294499%;transform:rotate(0deg)}
#work .nbcu-figma-preview .nbcu-thumb-glow-bottom,#work .project:hover .nbcu-figma-preview .nbcu-thumb-glow-bottom{left:-25.647794%;top:67.284947%;width:105.854412%;height:96.133731%;transform:rotate(0deg)}
#work .nbcu-figma-preview .nbcu-thumb-glow-top,#work .project:hover .nbcu-figma-preview .nbcu-thumb-glow-top{left:-29.224393%;top:-38.327711%;width:92.404669%;height:84.706595%;transform:rotate(0deg)}
#work .nbcu-figma-preview .nbcu-thumb-glow-center,#work .project:hover .nbcu-figma-preview .nbcu-thumb-glow-center{left:-19.356540%;top:-4.056310%;width:138.713079%;height:104.568910%;transform:rotate(0deg)}
#work .nbcu-figma-preview .nbcu-thumb-right,#work .project:hover .nbcu-figma-preview .nbcu-thumb-right{left:69.699485%;top:26.113966%;width:32.864706%;height:52.478252%;transform:rotate(19.71deg)}
#work .nbcu-figma-preview .nbcu-thumb-center,#work .project:hover .nbcu-figma-preview .nbcu-thumb-center{left:19.630882%;top:12.865672%;width:59.830441%;height:70.842644%;transform:rotate(0deg)}
#work .nbcu-figma-preview .nbcu-thumb-left,#work .project:hover .nbcu-figma-preview .nbcu-thumb-left{left:-9.683382%;top:26.328998%;width:33.923971%;height:52.487846%;transform:rotate(-17.22deg)}
@media(prefers-reduced-motion:reduce){.nbcu-thumbnail-layers{transition:none}#work .project:hover .nbcu-thumbnail-layers{transform:none}}

/* Save recipe preview: homepage featured card only. */
.home-page .recipe-thumbnail .recipe-mockup-background{filter:none}
.home-save-phone{position:relative;z-index:1;width:19%;aspect-ratio:424/858;pointer-events:none}
.home-save-phone iframe{display:block;width:100%;height:100%;border:0;background:transparent}
@media(max-width:700px){.home-save-phone{width:29%}}

.home-save-phone iframe{color-scheme:normal}

/* Figma background and Help Centers-style zoom, first homepage card only. */
.home-page .recipe-thumbnail{container-type:inline-size}
.home-save-background{position:absolute;inset:0;transition:transform .5s;transform:scale(1)}
.home-page .recipe-thumbnail .home-save-background .recipe-mockup-background{inset:auto 0 -5.69cqw;width:100%;height:auto;object-fit:cover;filter:none;transform:none;transition:none}
.home-save-background::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.home-page .project:hover .home-save-background{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){.home-save-background{transition:none}.home-page .project:hover .home-save-background{transform:none}}

/* Supporting screens enter once the homepage save story has finished. */
.home-companion{position:absolute;top:50%;width:17%;aspect-ratio:424/858;pointer-events:none;opacity:0;z-index:1;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .8s ease}
.home-companion--left{left:17%;transform:translate(-150%,-45%) rotate(-8deg)}
.home-companion--right{right:17%;transform:translate(150%,-45%) rotate(8deg);transition-delay:.18s}
.home-companion iframe{display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:normal}
.home-companion.is-ready{opacity:1;transform:translate(0,-50%) rotate(0)}
@media(max-width:700px){.home-companion{width:24%}.home-companion--left{left:4%}.home-companion--right{right:4%}}
@media(prefers-reduced-motion:reduce){.home-companion{transition:none}}

#help-centers .help-brand-divider{display:block;flex:none;width:1px;height:28px;background:rgba(255,255,255,.4)}
#work #help-centers .project-logo--hulu{width:60px;height:44px}
#work #help-centers .project-logo--hulu img{width:60px;height:auto}

#work .brand-divider{display:block;flex:none;width:1px;height:28px;background:rgba(255,255,255,.4)}
#work .project-logo--espn{width:82px;height:44px}
#work .project-logo--espn img{width:82px;height:auto}
#work .project-logo--star{width:70px;height:44px}
#work .project-logo--star img{width:70px;height:auto}

.home-page .hero-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.home-page .hero-tags span{display:inline-block;padding:7px 12px;border:0;border-radius:6px;background:var(--surface);color:var(--muted);font-size:10px;font-weight:500;line-height:1.3;letter-spacing:.1em;text-transform:uppercase}

@media(min-width:1001px){.home-page .hero h1{font-size:56px}}

.home-page .hero .intro+.hero-tags{margin:20px 0 28px}

.home-page .hero .intro{color:#fff}

/* Fill the first viewport while revealing 64px of the first case study. */
.home-page .hero{--header-height:114px;position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:24px;min-height:calc(100svh - var(--header-height) - 64px);padding:clamp(20px,5svh,64px) 0 16px;box-sizing:border-box}
.home-page .hero::after{content:"";display:block;flex:1 0 80px;width:1px;min-height:80px;background:rgba(255,255,255,.35);pointer-events:none}
.home-page .hero h1{margin-top:0}
@media(max-width:700px){
 .home-page .hero{--header-height:88px;gap:20px;padding-top:20px}
 .home-page .hero h1{font-size:clamp(24px,7vw,40px);font-weight:600;margin-bottom:18px}
 .home-page .hero .intro+.hero-tags{margin:16px 0 0}
 .home-page .hero-foot{margin-top:20px}
}
@media(max-height:600px){
 .home-page .hero{gap:12px;padding-top:12px;padding-bottom:12px}
 .home-page .hero h1{font-size:clamp(22px,4vw,36px);margin-bottom:12px}
 .home-page .hero .intro+.hero-tags{margin:12px 0 0}
 .home-page .hero-foot{margin-top:12px}
 .home-page .hero::after{flex-basis:64px;min-height:64px}
}
@media(max-height:500px) and (min-width:701px){
 .home-page>.site-header{height:64px}
 .home-page .hero{--header-height:64px;gap:8px;padding-block:8px}
 .home-page .hero h1{font-size:clamp(22px,2.8vw,28px);margin-bottom:8px}
 .home-page .hero .intro{font-size:14px}
 .home-page .hero .intro+.hero-tags{margin:8px 0 0}
 .home-page .hero-tags span{padding:4px 10px}
 .home-page .hero-foot{margin-top:8px}
 .home-page .hero-foot .pill{padding:6px 18px;font-size:12px}
}

.home-page .hero-foot .pill{border-color:transparent;color:var(--muted)}

.home-page .hero .hero-location{margin:0 auto 20px}
@media(max-height:600px){.home-page .hero .hero-location{margin-bottom:12px}}

/* Split the guide evenly around its centered work link. */
.home-page .hero::after{display:none}
.home-page .hero .hero-work-guide{display:flex;flex-direction:column;flex-wrap:nowrap;flex:1 0 132px;min-height:132px;margin:0;gap:0;align-items:center}
.home-page .hero-work-guide::before,.home-page .hero-work-guide::after{content:"";display:block;width:1px;flex:1;min-height:28px;background:rgba(255,255,255,.35);pointer-events:none}
.home-page .hero-work-guide .pill{flex:none;padding:12px 20px}
@media(max-width:700px){.home-page .hero .hero-work-guide{flex-basis:150px;min-height:150px}}
@media(max-height:600px){.home-page .hero .hero-work-guide{flex-basis:116px;min-height:116px}.home-page .hero-work-guide .pill{padding:8px 18px}}

.home-page .hero-copy>.hero-tags{margin-bottom:0}

.home-page .hero-work-guide .work-text-link{display:block;flex:none;margin:14px 0;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:14px;line-height:1.5}
.home-page .hero-work-guide .work-text-link:hover{background:none;color:var(--text)}

/* Quiet color drift and fine grain, clipped to the homepage headline. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .home-page .hero h1{
  background-image:url("assets/headline-grain.svg"),radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--surface) 90%,white 10%) 0%,#a4a4a4 22%,#dedede 42%,#f5f5f5 68%);
  background-size:180px 180px,180% 200%;
  background-repeat:repeat,no-repeat;
  background-position:0 0,0% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:headline-color-drift 15.652174s ease-in-out infinite alternate;
 }
}
@keyframes headline-color-drift{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
@media(prefers-reduced-motion:reduce){.home-page .hero h1{animation:none;background-position:0 0,45% 50%}}
@media(forced-colors:active){.home-page .hero h1{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;animation:none}}

/* Draw the work guide downward once on page load without shifting layout. */
.home-page .hero-work-guide::before,.home-page .hero-work-guide::after{transform-origin:top center;animation:work-guide-draw .9s cubic-bezier(.22,1,.36,1) both}
.home-page .hero-work-guide::before{animation-delay:.2s}
.home-page .hero-work-guide::after{animation-delay:1.1s}
@keyframes work-guide-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.home-page .hero-work-guide::before,.home-page .hero-work-guide::after{animation:none;transform:none}}

/* Lower the introduction while letting the guide absorb the extra spacing. */
.home-page .hero{padding-top:calc(clamp(20px,5svh,64px) + 10svh)}
.home-page .hero .hero-work-guide{flex-basis:max(56px,calc(132px - 10svh));min-height:56px}
.home-page .hero-work-guide::before,.home-page .hero-work-guide::after{min-height:4px}
@media(max-width:700px){.home-page .hero{padding-top:calc(20px + 10svh)}.home-page .hero .hero-work-guide{flex-basis:max(56px,calc(150px - 10svh))}}
@media(max-height:600px){.home-page .hero{padding-top:calc(12px + 10svh)}.home-page .hero .hero-work-guide{flex-basis:max(56px,calc(116px - 10svh))}}
@media(max-height:500px) and (min-width:701px){.home-page .hero{padding-top:calc(8px + 10svh)}}

/* One uninterrupted guide after removing the work label. */
.home-page .hero-work-guide::after{display:none}
.home-page .hero-work-guide::before{animation-duration:1.8s}

/* Give the mobile intro more navigation clearance; the flexible guide absorbs the space. */
@media(max-width:700px){.home-page .hero{padding-top:92px}}
@media(max-width:700px) and (max-height:600px){.home-page .hero{padding-top:84px}}

/* Three deliberate headline lines on wide desktop screens. */
@media(min-width:1440px){
 .home-page .hero-copy{max-width:1280px}
 .home-page .hero-headline-line{display:block;white-space:normal}
}

/* Leave room for glyph edges inside the gradient text paint area. */
.home-page .hero h1{padding:0 .08em .08em;overflow:visible}
/* Share the hero type scale with the two full-width case-study headlines. */
.home-page{--large-headline-size:56px}
@media(max-width:1000px){.home-page{--large-headline-size:55px}}
@media(max-width:700px){.home-page{--large-headline-size:clamp(24px,7vw,40px)}}
@media(max-height:600px){.home-page{--large-headline-size:clamp(22px,4vw,36px)}}
@media(max-height:500px) and (min-width:701px){.home-page{--large-headline-size:clamp(22px,2.8vw,28px)}}
.home-page .hero h1,
.home-page #work .featured .project-info h2,
.home-page #work #help-centers .project-info h2{font-size:var(--large-headline-size)}
/* Give the short About heading the full row. */
.home-page .about-grid>h2{grid-column:1 / -1;white-space:nowrap}
@media(max-width:700px){.home-page .about-grid>h2{font-size:clamp(22px,6.8vw,40px)}}

.home-page .hero h1{letter-spacing:-2px}

@media(max-width:700px){.home-page .hero h1{letter-spacing:-1px}}

@media(max-width:700px){.home-page #work .project-logo{scale:.72;transform-origin:left center}}

@media(max-width:700px){
 .home-page #work .project-info h2,.home-page #work .featured .project-info h2,.home-page #work #help-centers .project-info h2{font-size:20px;line-height:22px;margin-top:12px}
 .home-page #work .project-logo--disney{scale:.7056}
 .home-page #work .project-logo--espn{scale:.6912}
 .home-page #work #help-centers .project-logo--hulu{scale:.7056}
}

/* Bring the location closer to the headline on mobile. */
@media(max-width:700px){.home-page .hero .hero-location{position:relative;top:6px}}

/* Balance the visible logo edges around the paired-brand dividers on mobile.
   Disney's scaled wrapper leaves about 22px of extra space on its right. */
@media(max-width:700px){
 .home-page #work .brand-divider,
 .home-page #work #help-centers .help-brand-divider{margin-left:-26.3744px;margin-right:-4px}
}

/* Slightly larger homepage introduction on mobile only. */
@media(max-width:700px){
 .home-page .hero h1{font-size:30px;line-height:33px}
}

/* Keep every mobile case-study thumbnail in the same frame. */
@media(max-width:700px){
 .home-page #work .project>.project-image,
 .home-page #work .project>.mvc-home-demo{aspect-ratio:1.45;height:auto}
}

@media(min-width:701px){
 .home-page #work .project-brand .eyebrow{font-size:12px}
}

@media(min-width:701px){
 .home-page .hero h1{line-height:60px;font-weight:600}
}

@media(min-width:701px){
 .home-page .hero .hero-location{position:relative;top:2px;font-size:18px}
}

/* Uniform desktop case-study card typography. */
@media(min-width:701px){
 .home-page #work .project-info h2,
 .home-page #work .featured .project-info h2,
 .home-page #work #help-centers .project-info h2{
  font-size:44px;font-weight:600;letter-spacing:-1.5px;line-height:48px;
 }
}

@media(min-width:701px){
 .home-page #work .project-info{padding-top:18px}
}

@media(min-width:1001px){
 .home-page #work.wrap{width:min(1240px,calc(100% - 112px))}
}

/* Single-line brand strip: two gray logos remain visible before the third fades. */
#work .brand-systems-meta{flex-wrap:wrap;gap:12px 18px}
#work .brand-systems-lockup{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:100%}
#work .brand-systems-family{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;width:154px;min-width:154px;overflow:hidden;filter:grayscale(1);opacity:.65;mask-image:linear-gradient(to right,#000 108px,transparent 154px);-webkit-mask-image:linear-gradient(to right,#000 108px,transparent 154px)}
#work .brand-systems-family img{display:block;position:static;flex:none;width:auto;height:20px;max-width:60px;object-fit:contain}
#work .brand-systems-meta>.eyebrow{flex:0 0 auto;max-width:100%;margin:0 0 0 auto}
@media(max-width:700px){#work .brand-systems-lockup{gap:0}#work .brand-systems-family{margin-left:-16px;gap:6px;width:125px;min-width:125px;mask-image:linear-gradient(to right,#000 84px,transparent 125px);-webkit-mask-image:linear-gradient(to right,#000 84px,transparent 125px)}#work .brand-systems-family img{height:15px;max-width:48px}#work .brand-systems-meta{gap:8px}#work .brand-systems-meta>.eyebrow{flex:1 1 90px;text-align:right;margin:0 0 0 auto}}

/* Align the secondary brand strip with the Disney+ plus sign. */
#work .brand-systems-family{position:relative;top:7px}
@media(max-width:700px){#work .brand-systems-family{top:5px}}

#work .brand-label-mobile{display:none}
@media(max-width:700px){#work .brand-label-full{display:none}#work .brand-label-mobile{display:inline}#work .brand-systems-meta>.eyebrow{white-space:nowrap}}

/* Use the card width, not the device width, to keep the label beside the logos. */
#work a[href="disney-rebrand.html"] .project-info{container-type:inline-size;container-name:brand-systems-card}
#work .brand-systems-meta{flex-wrap:nowrap}
#work .brand-systems-meta>.eyebrow{flex:0 0 auto;white-space:nowrap}
@container brand-systems-card (max-width:450px){
 #work .brand-label-full{display:none}
 #work .brand-label-mobile{display:inline}
}

/* Center Hulu on the Disney+ plus sign. */
#work #help-centers .project-logo--hulu img{top:calc(50% + 5px)}

#work #help-centers .help-brand-divider{height:32px;margin-top:10px}
@media(max-width:700px){#work #help-centers .help-brand-divider{height:24px;margin-top:6px}}