@font-face{font-family:Inter;src:url('assets/inter.ttf') format('truetype');font-weight:100 900;font-display:swap}:root{color-scheme:dark;--bg:#111214;--surface:#1c1e21;--text:#f5f5f1;--muted:#a7abb1;--line:#37393d;--accent:#a8d9f3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.12;letter-spacing:-.045em}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:7px}a:hover{color:var(--accent)}.wrap{width:min(1440px,calc(100% - 112px));margin-inline:auto}.site-header{height:114px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:35px;font-weight:650;letter-spacing:-.07em;line-height:1}.wordmark span{color:var(--accent)}nav{display:flex;align-items:center;gap:32px;font-size:14px}.contact-link{border:1px solid #73777e;border-radius:40px;padding:10px 20px;margin-left:14px}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.13em;font-weight:500;color:var(--muted)}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:6%;padding-block:72px 88px;align-items:center}.hero h1{font-size:clamp(45px,5.4vw,82px);margin:28px 0;letter-spacing:-.055em;line-height:1.04}.hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.055em}.intro{font-size:18px;line-height:1.65;max-width:470px;color:#c0c3c7}.hero-image{height:540px;position:relative;overflow:hidden;border-radius:4px;background:#000}.hero-image>img{height:100%;object-fit:cover;object-position:50% 45%}.image-note{position:absolute;bottom:0;left:0;right:0;background:#111214e8;padding:14px 20px;font-size:12px;color:#c0c3c7}.hero-foot{display:flex;align-items:center;gap:24px;margin-top:34px}.hero-foot>span{color:var(--muted);font-size:12px}.pill{display:inline-block;border:1px solid #747980;padding:12px 23px;border-radius:40px;font-size:14px;white-space:nowrap;transition:background .2s,color .2s}.pill:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0 36px;border-top:1px solid var(--line)}.section-head>p:last-child{font-size:14px;color:var(--muted)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:64px 32px}.project.featured{grid-column:1/-1}.project-image{aspect-ratio:1.45;overflow:hidden;background:#22272c;border-radius:4px}.project-image img{height:100%;object-fit:cover;transition:transform .5s}.project:hover .project-image img{transform:scale(1.025)}.featured .project-image{aspect-ratio:2.3;background:#fa815f;padding:36px}.featured .project-image img{object-fit:contain}.ad{background:#252735;padding:22px}.ad img{object-fit:contain}.project-info{padding-top:26px}.project-info h2{font-size:38px;margin:13px 0 16px;color:var(--text)}.project-info p:not(.eyebrow){color:var(--muted);max-width:530px}.featured .project-info{display:grid;grid-template-columns:1fr 1fr;gap:32px}.featured .project-info h2{font-size:43px}.result{display:block;color:var(--accent);font-size:14px;margin:18px 0}.text-link{display:inline-block;font-size:14px;border-bottom:1px solid #777b80;padding-bottom:4px;color:var(--text)}.work{padding-bottom:110px}.about-section{background:#dce8ed;color:#192026;padding:80px 0}.about-section .eyebrow{color:#52616a}.about-grid{display:grid;grid-template-columns:.75fr 1.5fr;gap:12%;margin-top:36px}.about-grid h2{font-size:clamp(34px,4.2vw,61px)}.about-copy .large{font-size:26px;line-height:1.45;letter-spacing:-.025em}.about-copy p+p{margin-top:24px;color:#455660}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:70px}.principles>div{border-top:1px solid #9dabb3;padding-top:22px}.principles h3{font-size:22px;letter-spacing:-.03em;margin-bottom:12px}.principles p{color:#455660;font-size:15px}.experience{padding-block:90px}.experience-grid{display:grid;grid-template-columns:.75fr 1.5fr;gap:12%}.experience h2{font-size:48px;margin-top:20px}.career-row{border-bottom:1px solid var(--line);padding:25px 0;display:grid;grid-template-columns:1fr auto;gap:16px}.career-row:first-child{padding-top:0}.career-row h3{font-size:24px;letter-spacing:-.03em}.career-row p{font-size:14px;color:var(--muted);margin-top:8px}.career-row .date{font-size:12px;white-space:nowrap;color:var(--muted)}.small-note{font-size:14px;color:var(--muted);margin-top:28px}.contact{border-top:1px solid var(--line);padding:70px 0 85px}.contact h2{font-size:clamp(46px,7vw,104px);margin:24px 0 30px}.contact h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.email{font-size:clamp(16px,2.1vw,28px);border-bottom:1px solid var(--muted);overflow-wrap:anywhere}.contact-bottom p{color:var(--muted);font-size:14px}footer{border-top:1px solid var(--line);padding-block:30px;display:flex;justify-content:space-between;align-items:center;gap:24px}footer p,footer>a:last-child{font-size:12px;color:var(--muted)}.skip{position:fixed;top:-100px;left:12px;z-index:20;padding:10px;background:var(--accent);color:#111}.skip:focus{top:12px}.case-hero{padding:55px 0 55px}.back{font-size:14px;color:var(--muted);display:inline-block;margin-bottom:45px;border-bottom:1px solid var(--line)}.case-hero h1,.food-case-hero h2{font-size:clamp(48px,6.5vw,96px);max-width:1000px;margin:22px 0 26px}.case-deck{font-size:22px;max-width:760px;color:#b9bec4}.case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:45px;padding-top:25px;border-top:1px solid var(--line)}.case-meta strong{display:block;font-size:14px;font-weight:500;margin-top:7px}.case-cover{background:#252735;padding:40px;border-radius:4px}.case-cover img{max-height:720px;object-fit:contain}.case-body{width:min(1080px,calc(100% - 112px));margin:auto}.story{padding:75px 0;border-bottom:1px solid var(--line)}.story h2{font-size:42px;max-width:800px;margin:16px 0 25px}.story>p:not(.eyebrow),.fnk-evolution-copy p{color:#b9bec4;font-size:19px;max-width:830px;line-height:1.75}.story>p+p{margin-top:20px}.story figure{margin:36px 0 0;padding:26px;background:#202228;border-radius:4px}.story figure img{max-height:800px;object-fit:contain}.story figcaption{font-size:12px;color:var(--muted);margin-top:15px;text-align:center}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:35px}.stat strong{display:block;color:var(--accent);font-size:56px;line-height:1.1;letter-spacing:-.055em}.stat p{font-size:14px;color:var(--muted);margin-top:14px}.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.phone-grid figure{padding:20px 10px}.phone-grid img{max-height:570px}.decisions{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}.decisions h3{font-size:24px;letter-spacing:-.03em;margin-bottom:14px}.decisions p{color:var(--muted);font-size:16px}.next-project{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:65px 0}.next-project h2{font-size:36px;margin-top:10px}.reading-source{font-size:12px;color:var(--muted);padding-top:30px}.reading-source a{text-decoration:underline}@media(min-width:1600px){.hero-image{height:625px}}@media(max-width:1000px){.wrap,.case-body{width:calc(100% - 64px)}.hero{gap:30px}.hero-image{height:470px}.hero h1{font-size:55px}.hero-foot{display:block}.hero-foot>span{display:block;margin-top:16px}.about-grid,.experience-grid{gap:7%;grid-template-columns:.8fr 1.2fr}.about-copy .large{font-size:23px}.project-info h2{font-size:33px}.hero .intro{font-size:16px}.stats{gap:20px}.stat strong{font-size:45px}}@media(max-width:700px){html{scroll-padding-top:24px}.wrap,.case-body{width:calc(100% - 40px)}.site-header{height:88px}.wordmark{font-size:30px}nav{gap:18px;font-size:13px}.contact-link{margin-left:0;border:none;padding:0}.hero{grid-template-columns:1fr;padding:45px 0 55px;gap:35px}.hero h1{font-size:clamp(43px,10.5vw,68px);margin:22px 0}.hero-image{height:370px}.hero-foot{display:flex;gap:18px}.hero-foot>span{margin:0}.hero .intro{font-size:17px}.section-head{align-items:start;padding-bottom:26px}.section-head>p:last-child{max-width:160px;font-size:12px;text-align:right}.projects{grid-template-columns:1fr;gap:45px}.featured .project-info{display:block}.featured .project-image{aspect-ratio:1.5;padding:12px}.project-info h2,.featured .project-info h2{font-size:33px}.work{padding-bottom:60px}.about-section{padding:50px 0}.about-grid,.experience-grid{grid-template-columns:1fr;gap:28px}.about-copy .large{font-size:22px}.principles{grid-template-columns:1fr;margin-top:40px;gap:25px}.experience{padding-block:55px}.experience h2{font-size:39px}.career-row h3{font-size:20px}.career-row{gap:12px}.career-row .date{font-size:11px}.contact{padding:50px 0}.contact-bottom{align-items:start;flex-direction:column}.contact h2{font-size:50px}.email{font-size:17px}footer{flex-wrap:wrap}footer p{font-size:11px}.case-hero{padding-top:32px}.case-hero h1,.food-case-hero h2{font-size:46px}.back{margin-bottom:30px}.case-deck{font-size:19px}.case-meta{grid-template-columns:1fr;gap:16px}.case-cover{padding:14px}.story{padding:45px 0}.story h2{font-size:32px}.story>p:not(.eyebrow),.fnk-evolution-copy p{font-size:17px}.stats{grid-template-columns:1fr;gap:26px}.stat strong{font-size:52px}.decisions{grid-template-columns:1fr}.phone-grid{grid-template-columns:1fr 1fr;gap:10px}.phone-grid figure{padding:10px 5px}.story figure{padding:14px}.next-project{align-items:start;flex-direction:column}.next-project h2{font-size:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Food Network interaction walkthroughs */
.demo-jump{margin-top:24px;color:var(--accent)}.demo-layout{display:grid;grid-template-columns:1fr 390px;gap:70px;align-items:center;margin-top:42px}.demo-options{display:grid;gap:0;border-top:1px solid var(--line)}.demo-options button{display:flex;align-items:center;gap:18px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--muted);padding:19px 12px;font-size:16px;cursor:pointer;transition:background .2s,color .2s}.demo-options button span{font-size:12px;color:var(--muted)}.demo-options button:hover{background:#20282e;color:var(--text)}.demo-options button[aria-pressed=true]{background:#a8d9f310;color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.demo-description{margin-top:32px;min-height:154px}.demo-description h3{font-size:26px;letter-spacing:-.03em;line-height:1.25;margin-bottom:14px}.demo-description p{font-size:16px;line-height:1.7;color:var(--muted)}.demo-controls{display:flex;align-items:center;gap:25px}.demo-controls button{cursor:pointer}.demo-controls .pill{background:var(--accent);color:#111214;border-color:var(--accent);min-width:126px}.demo-replay{background:none;border:0;border-bottom:1px solid #70767c;color:var(--text);font-size:14px;padding:4px 0}.demo-replay:disabled{opacity:.35;cursor:default}.demo-note{font-size:12px;color:var(--muted);margin-top:18px}.demo-stage{position:relative;aspect-ratio:424 / 858;width:100%;background:#1c2025;border-radius:30px;overflow:hidden;display:grid;place-items:center;border:1px solid #373d44}.demo-stage>img{height:94%;width:91%;object-fit:contain}.demo-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}.demo-stage[aria-busy=true]::after{content:'Loading demo…';position:absolute;inset:0;display:grid;place-items:center;background:#1c2025;font-size:14px;color:var(--muted)}@media(max-width:1000px){.demo-layout{grid-template-columns:1fr 330px;gap:30px}}@media(max-width:700px){.demo-layout{grid-template-columns:1fr;gap:26px}.demo-stage{max-width:350px;justify-self:center}.demo-description{min-height:0;margin-top:26px;margin-bottom:24px}.demo-options button{padding:16px 12px}.demo-description h3{font-size:24px}}
/* Food Network opening photo stack, adapted from the portfolio presentation. */
.food-hero-grid{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:5%;padding:10px 0 20px}.food-case-hero h1,.food-case-hero h2{font-weight:700;letter-spacing:-1px;font-size:clamp(44px,4.6vw,72px);line-height:1.07}.food-case-hero .case-deck{font-size:20px;max-width:590px}.food-stack-area{min-width:0;position:relative}.food-photo-stack{position:relative;width:100%;aspect-ratio:1.06;isolation:isolate}.food-stack-photo{position:absolute;width:78%;height:84%;left:10%;top:7%;object-fit:cover;border-radius:12px;box-shadow:0 20px 50px #0006;transform:translate(var(--x),var(--y)) rotate(var(--angle));opacity:1}.food-stack-photo:nth-child(1){--x:-20px;--y:-12px;--angle:-10deg;--delay:0s;z-index:1}.food-stack-photo:nth-child(2){--x:20px;--y:2px;--angle:7deg;--delay:.4s;z-index:2}.food-stack-photo:nth-child(3){--x:0px;--y:24px;--angle:-3deg;--delay:.8s;z-index:3}.food-stack-photo:nth-child(4){--x:-16px;--y:6px;--angle:9deg;--delay:1.2s;z-index:4}.food-stack-photo:nth-child(5){--x:14px;--y:-6px;--angle:-7deg;--delay:1.6s;z-index:5}.food-stack-photo:nth-child(6){--x:0px;--y:18px;--angle:3deg;--delay:2s;z-index:6}.food-photo-stack.is-playing .food-stack-photo{animation:foodPhotoReveal .22s ease-out var(--delay) both}@keyframes foodPhotoReveal{from{opacity:0;transform:translate(var(--x),calc(var(--y) + 30px)) rotate(var(--angle)) scale(.96)}to{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--angle)) scale(1)}}.food-stack-replay{display:block;margin:30px auto 0;padding:7px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);font-size:12px;cursor:pointer}.food-stack-replay:hover{color:var(--accent)}@media(max-width:1000px){.food-hero-grid{gap:3%}.food-case-hero h1,.food-case-hero h2{font-size:46px}.food-case-hero .case-deck{font-size:18px}}@media(max-width:700px){.food-hero-grid{grid-template-columns:1fr;gap:32px;padding-top:0}.food-case-hero h1,.food-case-hero h2{font-size:46px}.food-stack-area{width:min(100%,420px);justify-self:center}.food-photo-stack{width:94%;margin:auto}.food-stack-replay{margin-top:26px}.food-case-hero .case-meta{margin-top:24px}}@media(prefers-reduced-motion:reduce){.food-photo-stack.is-playing .food-stack-photo{animation:none;opacity:1}.food-stack-replay{display:none}}

.food-network-cover{padding:0;overflow:hidden;background:transparent}.food-network-cover img{max-height:none;width:100%;height:auto}

.recipe-mockup{position:relative;aspect-ratio:2 / 1;display:grid;place-items:center}.recipe-mockup .recipe-mockup-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.recipe-mockup .recipe-mockup-screen{position:relative;z-index:1;width:19%;height:auto;max-height:none;filter:drop-shadow(0 14px 24px #00000026)}@media(max-width:700px){.recipe-mockup{aspect-ratio:1.35}.recipe-mockup .recipe-mockup-screen{width:29%}}

/* Original launch walkthroughs */
.launch-demos{width:min(1440px,calc(100vw - 112px));position:relative;left:50%;transform:translateX(-50%);padding:65px 0;background:var(--bg)}
.launch-demo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.launch-demo{margin:0;text-align:center;min-width:0}
.launch-demo figcaption{color:#fff;font-size:18px;font-weight:500;line-height:1.4;min-height:26px;margin-bottom:0}
.launch-demo iframe{display:block;width:100%;aspect-ratio:424 / 858;border:0;background:transparent;pointer-events:none}
.launch-demo-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 17px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.launch-demo-toggle:hover{color:var(--text);border-color:var(--muted)}
.launch-demo-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:1000px){.launch-demos{width:calc(100vw - 64px)}.launch-demo-grid{gap:30px;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.launch-demos{width:100%;padding:40px 0}.launch-demo-grid{grid-template-columns:1fr;gap:40px}.launch-demo{width:min(100%,340px);margin:auto}.launch-demo figcaption{min-height:0}}

.launch-demo iframe{color-scheme:normal}

/* Dedicated recipe-saving interaction */
.launch-demo-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;margin-inline:auto}
.save-recipe-story{display:grid;grid-template-columns:1fr 360px;gap:70px;align-items:center;border-top:1px solid var(--line)}
.save-recipe-story h2{margin-top:0}
.save-recipe-copy p{color:#b9bec4;font-size:19px;line-height:1.75;max-width:530px}
.save-recipe-story .launch-demo{margin:0;padding:0;background:transparent;border-radius:0;width:100%}
.save-recipe-story figcaption[hidden]{display:none}
@media(max-width:1000px){.launch-demo-grid{gap:20px}.save-recipe-story{grid-template-columns:1fr 310px;gap:35px}}
@media(max-width:700px){.save-recipe-story{grid-template-columns:1fr;gap:24px}.save-recipe-story .launch-demo{max-width:340px;margin:auto}.save-recipe-copy p{font-size:17px}}
@media(max-width:600px){.launch-demo-grid{grid-template-columns:1fr;gap:40px}}

.launch-demo-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1440px}
@media(max-width:1000px){.launch-demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.launch-demo-grid{grid-template-columns:1fr}}

/* Consistent body copy across portfolio pages and screen sizes. */
.intro,.hero .intro,.case-deck,.food-case-hero .case-deck,
.about-copy p,.about-copy .large,.principles p,.career-row p,
.project-info p:not(.eyebrow),.contact-bottom p,
.story>p:not(.eyebrow),.fnk-evolution-copy p,.save-recipe-copy p,.demo-description p,
.decisions p,.stat p{font-size:16px}

/* Food Network content card collection. */
.card-styles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;margin-top:32px}
.card-styles-story .card-styles-grid figure{margin:0;padding:0;background:transparent;width:80%}
.card-styles-story .card-styles-grid figcaption{font-size:16px;font-weight:500;color:#fff;text-align:left;margin:0 0 14px}
.card-styles-story .card-styles-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;max-height:none}
@media(max-width:850px){.card-styles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.card-styles-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.card-styles-story .card-styles-grid figure{width:100%}}

/* Original category icon artwork. */
.category-icons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:32px;background:#d8dcdf;border:1px solid #d8dcdf;border-radius:4px;overflow:hidden}
.category-icons-story .category-icons-grid figure{margin:0;padding:32px 20px;background:#f5f5f1;border-radius:0;text-align:center}
.category-icon-art{height:90px;display:flex;align-items:center;justify-content:center}
.category-icons-story .category-icon-art img{width:72px;height:72px;max-height:none;object-fit:contain}
.category-icons-story .category-icons-grid figcaption{margin:16px 0 0;color:#192026;font-size:16px;font-weight:500}
@media(max-width:600px){.category-icons-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-icons-story .category-icons-grid figure{padding:24px 12px}}

/* Individual square icon tiles. */
.category-icons-grid{gap:24px;background:transparent;border:0;border-radius:0;overflow:visible}
.category-icons-story .category-icons-grid figure{padding:0;aspect-ratio:1;background:#fff;display:grid;place-items:center}
.category-icons-story .category-icon-art{height:auto}
@media(max-width:600px){.category-icons-grid{gap:16px}.category-icons-story .category-icons-grid figure{padding:0}}

/* Compact icon frames. */
.category-icons-grid{grid-template-columns:repeat(3,112px);gap:24px}
.category-icons-story .category-icons-grid figure{width:112px;height:112px;border-radius:6px}
@media(max-width:600px){.category-icons-grid{grid-template-columns:repeat(3,minmax(0,112px));gap:16px}.category-icons-story .category-icons-grid figure{width:100%;height:auto}}

/* Spread the fifteen icons across the section. */
.category-icons-grid{grid-template-columns:repeat(5,112px);justify-content:space-between;gap:32px 24px}
@media(max-width:800px){.category-icons-grid{grid-template-columns:repeat(3,112px)}}
@media(max-width:600px){.category-icons-grid{grid-template-columns:repeat(3,minmax(0,112px));gap:20px 16px}}

/* Equal spacing between icon tiles in both directions. */
.category-icons-story{container-type:inline-size}
.category-icons-grid{gap:max(24px,calc((100cqw - 560px)/4))}
@media(max-width:800px){.category-icons-grid{gap:max(16px,calc((100cqw - 336px)/2))}}

/* Compact, evenly spaced icon gallery. */
.category-icons-grid{gap:24px;justify-content:center}
@media(max-width:600px){.category-icons-grid{gap:16px}}

/* Align the icon gallery below its section title. */
.category-icons-story{display:block}
.category-icons-story .category-icons-grid{margin-top:32px;justify-content:start}

/* Let icons flow across the available section width. */
.category-icons-story .category-icons-grid{grid-template-columns:repeat(auto-fill,112px)}
@media(max-width:600px){.category-icons-story .category-icons-grid{grid-template-columns:repeat(auto-fill,minmax(96px,112px))}}

/* Light grey icon tiles with white outlines. */
.category-icons-story .category-icons-grid figure{background:#e8e8e8;border:1px solid #fff;box-sizing:border-box}

.category-icons-story .category-icons-grid figure{transition:background-color 150ms ease}
.category-icons-story .category-icons-grid figure:hover{background:#fff}
@media(prefers-reduced-motion:reduce){.category-icons-story .category-icons-grid figure{transition:none}}

/* Gentle motion for icon artwork on hover. */
.category-icons-story .category-icon-art img{transition:transform 200ms ease;transform-origin:center}
@media(hover:hover){.category-icons-story .category-icons-grid figure:hover .category-icon-art img{transform:translateY(-3px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.category-icons-story .category-icon-art img{transition:none}.category-icons-story .category-icons-grid figure:hover .category-icon-art img{transform:none}}

/* App Store reviews. */
.reviews-rating{margin:28px 0 36px}
.reviews-stars{display:block;color:#ffcf66;font-size:28px;letter-spacing:4px;line-height:1.3}
.reviews-rating p{font-size:16px;line-height:1.7;color:#c4c8cc;margin:12px 0 0}
.reviews-quotes{display:grid;gap:28px;max-width:900px}
.reviews-quotes blockquote{margin:0;padding:0 0 0 24px;border-left:2px solid #45474a}
.reviews-quotes p{margin:0;color:#c4c8cc;font-size:16px;line-height:1.75}
.reviews-quotes blockquote:first-child p{color:#f5f5f1;font-size:24px;font-weight:500;line-height:1.4}

/* Webby recognition. */
.awards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px;margin-top:36px}
.award-item{border-left:2px solid #45474a;padding-left:24px}
.award-item h3{font-size:20px;line-height:1.4;font-weight:500;margin:0 0 10px;color:#f5f5f1}
.award-item p{font-size:16px;line-height:1.7;color:#c4c8cc;margin:0}
@media(max-width:600px){.awards-grid{grid-template-columns:1fr;gap:28px}}

/* Combined reviews and industry recognition. */
.recognition-story>h2{font-size:52px;line-height:1.12;max-width:850px;margin-bottom:56px}
.recognition-story .combined-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px}
.recognition-story .eyebrow{margin:0 0 24px;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.recognition-rating{margin:0 0 36px}
.recognition-stars{display:inline-block;color:#ffcf66;font-size:25px;letter-spacing:4px;margin-bottom:12px}
.recognition-score{font-size:54px;line-height:1.1;letter-spacing:-3px;margin-bottom:12px}
.recognition-score span{font-size:24px;color:#9da3a9;letter-spacing:0}
.recognition-story .recognition-rating p,.recognition-story .recognition-quotes p,.recognition-story .award-item p{font-size:16px;line-height:1.75;color:#c4c8cc;margin:0}
.recognition-quotes{display:grid;gap:32px}
.recognition-quotes blockquote{margin:0;padding-left:0;border-left:0}
.recognition-story .recognition-quotes blockquote:first-child p{font-size:26px;line-height:1.4;color:#f5f5f1}
.recognition-story .recognition{padding-left:48px;border-left:1px solid #343638}
.recognition-story .award-item{padding:28px 0;border-left:0;border-bottom:1px solid #343638}
.recognition-story .award-item h3{font-size:20px;line-height:1.35;font-weight:500;margin:0 0 12px}
.recognition-story .award-item:nth-of-type(1) h3,.recognition-story .award-item:nth-of-type(2) h3{color:#ffcf66}
@media(max-width:700px){.recognition-story>h2{font-size:38px;margin-bottom:40px}.recognition-story .combined-grid{grid-template-columns:1fr;gap:32px}.recognition-story .recognition{padding:32px 0 0;border-left:0;border-top:1px solid #343638}}

.recognition-story .recognition-awards-title{font-size:32px;line-height:1.2;letter-spacing:-1px;font-weight:500;color:#f5f5f1;margin:0 0 12px}

.recognition-rating{display:grid;grid-template-columns:max-content max-content;align-items:center;gap:12px 20px}
.recognition-rating .recognition-stars,.recognition-rating .recognition-score{margin-bottom:0}
.recognition-rating>p{grid-column:1/-1}
@media(max-width:400px){.recognition-rating{column-gap:12px}.recognition-rating .recognition-score{font-size:42px}.recognition-rating .recognition-stars{font-size:22px;letter-spacing:2px}}

.recognition-rating{grid-template-columns:max-content minmax(0,1fr);align-items:end;column-gap:12px}
.recognition-rating .recognition-stars{justify-self:start;line-height:1;padding-bottom:5px}
.recognition-rating .recognition-score{line-height:1}

.recognition-story .recognition-quotes p{font-family:Georgia,"Times New Roman",serif}

.recognition-story .award-item:last-child{border-bottom:0}

.campaign-video-player{position:relative;width:100%;padding-top:56.25%;padding-bottom:40px;margin-top:32px;background:#000;overflow:hidden;border-radius:6px}.campaign-video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.campaign-video-source{margin-top:16px;font-size:14px}

.campaign-video-player{padding-bottom:0}.campaign-video-player iframe{height:calc(100% + 40px)}

@media(min-width:701px){.navigation-story{grid-template-columns:360px 1fr}.navigation-story .launch-demo{grid-column:1;grid-row:1}.navigation-story .save-recipe-copy{grid-column:2;grid-row:1}}
@media(min-width:701px) and (max-width:1000px){.navigation-story{grid-template-columns:310px 1fr}}

/* Food Network launch cover, matching the live portfolio. */
.food-cover-page>.site-header{position:absolute;inset:0 0 auto;z-index:5;border-bottom:0}
.fnk-launch-cover{position:relative;min-height:640px;height:100svh;isolation:isolate;background:#987e9b;display:flex;align-items:flex-end;justify-content:center;padding:150px 56px 130px;text-align:center;overflow:hidden}
.fnk-launch-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.fnk-launch-cover:after{content:"";position:absolute;inset:0;background:rgba(25,8,31,.28);z-index:-1}
.fnk-launch-cover-copy{width:100%;max-width:1400px}
.fnk-launch-cover h1{font-size:clamp(40px,5.55vw,88px);font-weight:700;line-height:1.22;letter-spacing:-.025em;color:#fff}
.fnk-cover-next{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);padding:12px;color:#fff;line-height:0}
@media(max-width:700px){.fnk-launch-cover{min-height:560px;padding:130px 24px 120px}.fnk-launch-cover h1{font-size:clamp(36px,7vw,48px)}.food-cover-page>.site-header{background:rgba(17,18,20,.2)}}

/* Subtle cover entrance. */
@keyframes fnk-cover-zoom{from{transform:scale(1.055)}to{transform:scale(1)}}
@keyframes fnk-cover-reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fnk-cover-arrow{from{opacity:0}to{opacity:1}}
.fnk-launch-cover>img{animation:fnk-cover-zoom 7s cubic-bezier(.2,.6,.3,1) both}
.fnk-launch-cover-copy{animation:fnk-cover-reveal 1.2s cubic-bezier(.2,.7,.3,1) .15s both}
.fnk-cover-next{animation:fnk-cover-arrow 1s ease .8s both}
@media(prefers-reduced-motion:reduce){.fnk-launch-cover>img,.fnk-launch-cover-copy,.fnk-cover-next{animation:none}}

/* Alternative: the cover artwork settles into the introduction on scroll. */
.fnk-stack-cover{height:100svh;min-height:650px;position:relative;overflow:hidden;background:var(--bg)}
.fnk-stack-cover-caption{position:absolute;bottom:86px;width:100%;padding:0 24px;text-align:center}
.fnk-stack-cover-caption h1{font-size:clamp(24px,2.5vw,40px);font-weight:600;margin-top:12px}
.fnk-stack-cover .fnk-cover-next{animation:none;bottom:24px}
.food-cover-page .food-stack-area{aspect-ratio:1.06}
.food-cover-page .food-photo-stack{transform-origin:top left}
.food-photo-stack.is-cover-floating{position:fixed!important;margin:0!important;z-index:4;pointer-events:none;will-change:transform}
@media(prefers-reduced-motion:reduce){.fnk-stack-cover{display:none}.food-cover-page>.site-header{position:relative}}

.food-photo-stack.is-loading .food-stack-photo{opacity:0}
@media(prefers-reduced-motion:reduce){.food-photo-stack.is-loading .food-stack-photo{opacity:1}}

.app-of-the-day-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}.app-of-the-day-grid img{width:100%;height:auto;border-radius:6px}@media(max-width:700px){.app-of-the-day-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

.campaign-video-story{border-bottom:0}

.product-marketing-story>.app-of-the-day-story{margin-top:75px}@media(max-width:700px){.product-marketing-story>.app-of-the-day-story{margin-top:48px}}

.case-meta .previous-company{font-weight:300;font-style:italic}

.recipe-mockup .recipe-mockup-background{filter:blur(4px);transform:scale(1.015)}


.navigation-states{display:grid;justify-items:center;gap:24px;margin-top:40px;width:100%;padding:28px 24px;background:#fff;border-radius:6px}.navigation-state-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;width:100%;max-width:622.08px}.navigation-state-row img{width:100%;max-width:96px;height:auto}@media(max-width:700px){.navigation-states{gap:16px;margin-top:32px}}

.allergen-icons-panel{margin-top:24px}.category-icons-story .allergen-icons-row{margin-top:0}.allergen-icons-row .category-icon-art img{width:72px;height:72px;object-fit:contain}

.category-icons-story .allergen-icons-row{grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(4px,1.5vw,24px)}.category-icons-story .allergen-icons-row figure{width:100%;height:auto;aspect-ratio:1}.allergen-icons-row .category-icon-art{width:100%;display:grid;place-items:center}.allergen-icons-row .category-icon-art img{width:153.6%;height:auto;aspect-ratio:1;max-width:172.8px}

.category-icons-story .allergen-icons-row figure{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:6px 2px}.category-icons-story .allergen-icons-row figcaption{margin:0;color:#242424;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:0}.allergen-icons-row .category-icon-art{flex-shrink:0}

.recipe-scroll-phone{position:relative;z-index:1;width:19%;aspect-ratio:1221/2532;padding:clamp(4px,.55vw,8px);background:#fff;border-radius:clamp(14px,2vw,30px);filter:drop-shadow(0 14px 24px #00000026);overflow:hidden}
.recipe-scroll-viewport{width:100%;height:100%;overflow:hidden;border-radius:clamp(10px,1.5vw,23px)}
.recipe-mockup .recipe-scroll-image{width:100%;height:auto;max-height:none;display:block;will-change:transform}
.recipe-scroll-toggle{position:absolute;bottom:16px;right:16px;z-index:2;border:1px solid #ffffff70;border-radius:24px;background:#111214bb;color:#fff;padding:7px 14px;font-size:12px;cursor:pointer}
@media(max-width:700px){.recipe-scroll-phone{width:29%}.recipe-scroll-toggle{bottom:8px;right:8px;padding:5px 10px;font-size:11px}}

.recipe-scroll-viewport{position:relative}.recipe-scroll-frame{position:absolute;top:0;left:0;width:375px;border:0;transform-origin:top left;pointer-events:none;background:#fff}

/* Live recipe preview for the Food Network home-page project. */
.featured .recipe-thumbnail{aspect-ratio:2 / 1;padding:0;background:#fff;isolation:isolate}
.featured .recipe-thumbnail .recipe-mockup-background{object-fit:cover;transform:scale(1.015);transition:none}
.recipe-thumbnail .recipe-scroll-phone{pointer-events:none}
.recipe-thumbnail-link{position:absolute;inset:0;z-index:2}
.recipe-thumbnail .recipe-scroll-toggle{z-index:3}
@media(max-width:700px){.featured .recipe-thumbnail{aspect-ratio:1.35;padding:0}}

/* CNNgo case study */
.cnn-cover{aspect-ratio:2740 / 1536}.cnn-cover img{width:100%;height:100%;object-fit:cover}
.cnn-screen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.story .cnn-screen-grid figure{margin:0}.cnn-screen-grid img{width:100%;height:auto;display:block;border-radius:4px}
.cnn-caption{font-size:13px!important;color:var(--muted);margin-top:14px!important}
.project-image.cnn img{width:100%;object-fit:cover}
@media(max-width:700px){.cnn-screen-grid{grid-template-columns:1fr;gap:20px}}

.cnn-series-artwork figure img{display:block;width:100%;height:auto;max-height:none}

.cnn-artwork-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}.story .cnn-artwork-grid figure{margin:0;padding:14px}.cnn-artwork-grid figcaption{line-height:1.5}@media(max-width:700px){.cnn-artwork-grid{grid-template-columns:1fr;gap:20px}}

.cnn-cover-page>.site-header{position:absolute;inset:0 0 auto;z-index:5;border-bottom:0}
.cnn-motion-cover{height:100svh;min-height:560px;position:relative;background:var(--bg)}
.cnn-cover-caption{position:absolute;bottom:86px;width:100%;padding:0 24px;text-align:center}
.cnn-cover-caption h1{font-size:clamp(24px,2.5vw,40px);font-weight:600;margin-top:12px}
.cnn-cover-next{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:10px;color:var(--text)}
.cnn-hero-grid{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:5%;padding:10px 0 76px}
.cnn-case-hero h2{font-weight:700;font-size:clamp(40px,4.6vw,72px);line-height:1.07;letter-spacing:-1px;margin:22px 0 26px}
.cnn-case-hero .case-deck{font-size:20px}
.cnn-photo-slot,.cnn-motion-photo{aspect-ratio:2000/1126;width:100%}
.cnn-motion-photo{transform-origin:top left}
.cnn-motion-photo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 50px #0005}
.cnn-motion-photo.is-floating{position:fixed;left:0;top:0;z-index:4;pointer-events:none;will-change:transform}
@media(max-width:700px){.cnn-hero-grid{grid-template-columns:1fr;gap:28px}.cnn-case-hero h2{font-size:42px}.cnn-cover-caption{bottom:90px}.cnn-case-hero .case-meta{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.cnn-motion-cover{display:none}.cnn-cover-page>.site-header{position:relative}}

/* Two offset photo cards reveal back-to-front, matching the Food Network stack. */
.cnn-motion-photo{position:relative;isolation:isolate}
.cnn-motion-photo img{position:absolute;width:76%;height:auto;object-fit:contain;box-shadow:0 20px 50px #0008;transform:rotate(var(--card-angle));transform-origin:center}
.cnn-motion-photo .cnn-cover-sign{left:1%;top:17%;--card-angle:-8deg;--card-delay:.4s;z-index:3}
.cnn-motion-photo img:last-child{left:23%;top:-2%;--card-angle:9deg;--card-delay:0s;z-index:2}
.cnn-motion-photo.is-loading img{opacity:0}
.cnn-motion-photo.is-ready img{animation:cnnPhotoReveal .3s ease-out var(--card-delay) both}
@keyframes cnnPhotoReveal{from{opacity:0;transform:translateY(30px) rotate(var(--card-angle)) scale(.96)}to{opacity:1;transform:translateY(0) rotate(var(--card-angle)) scale(1)}}
@media(prefers-reduced-motion:reduce){.cnn-motion-photo.is-ready img{animation:none}.cnn-motion-photo.is-loading img{opacity:1}}

.cnn-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;margin-top:36px}.cnn-category-grid img{display:block;width:100%;height:auto;clip-path:inset(0 0 .78125% 0)}@media(max-width:700px){.cnn-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

.cnn-cover-page .stats .stat strong{letter-spacing:1px}

/* CNN's deep red atmosphere fades into near-black across the viewport. */
.cnn-cover-page{--bg:#150909;--line:#ffffff24;background-color:var(--bg);background-image:radial-gradient(ellipse at 90% 0%,#99090080 0%,#99090000 63%),linear-gradient(180deg,#541516 0%,#341011 42%,#100606 84%,#160d0d 100%);background-attachment:fixed;background-size:100% 100vh}
.cnn-cover-page .cnn-motion-cover{background:transparent}
.cnn-cover-page .story figure{background:rgba(28,16,17,.66)}

.cnn-cover-page .stats .stat:first-child strong{color:#e00000}

/* CNN impact cards — editorial outline */
.cnn-impact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.cnn-impact-card{padding:28px;min-height:230px;background:#ffffff03;border:1px solid #ffffff4a;border-radius:var(--card-radius)}
.cnn-impact-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#ccaaa9;margin-bottom:38px}
.cnn-impact-card p{font-size:21px;line-height:1.6;color:var(--text)}
.cnn-impact-card strong{font-weight:650}
@media(max-width:700px){.cnn-impact-cards{grid-template-columns:1fr;gap:16px}.cnn-impact-card{padding:24px;min-height:0}.cnn-impact-label{margin-bottom:24px}.cnn-impact-card p{font-size:20px}}

#save-recipe-title{display:flex;align-items:flex-start;gap:18px}
#save-recipe-title .save-recipe-icon{flex:0 0 26px;width:26px;height:auto;margin-top:6px}
@media(max-width:700px){#save-recipe-title{gap:14px}#save-recipe-title .save-recipe-icon{flex-basis:22px;width:22px;margin-top:3px}}

/* Subtle hover feedback for CNN impact cards */
@media(hover:hover) and (pointer:fine){
 .cnn-impact-card{transition:transform 180ms ease,background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
 .cnn-impact-card:hover{transform:translateY(-3px);background-color:#ffffff08;border-color:#ffffff70;box-shadow:0 8px 20px #00000018}
}
@media(prefers-reduced-motion:reduce){.cnn-impact-card:hover{transform:none}}

/* Food Network Kitchen: evolution of the landing screen. */
.fnk-before-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:760px;margin:40px auto}
.story .fnk-before-after figure{margin:0;padding:0;background:transparent;border-radius:0}
.story .fnk-before-after figcaption{margin:0 0 16px;text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.story .fnk-before-after img{display:block;width:100%;height:auto;max-height:none;border-radius:20px}
@media(max-width:700px){.fnk-before-after{grid-template-columns:minmax(0,1fr);max-width:360px;gap:32px}}

/* Match the demos' 407 × 844 white shell and 375 × 812 screen. */
.fnk-before-after figure{container-type:inline-size}
.fnk-comparison-frame{padding:3.931204%;background:#fff;border-radius:11.793612cqw;overflow:hidden}
.fnk-comparison-screen{position:relative;aspect-ratio:375/812;border-radius:7.862408cqw;overflow:hidden;background:#fff}
.story .fnk-before-after .fnk-comparison-screen img{position:absolute;left:-4.266667%;top:-1.970443%;width:108.533333%;max-width:none;height:auto;max-height:none;border-radius:0}

.fnk-before-after{display:block;max-width:360px;text-align:center}
.fnk-reveal-before{clip-path:none}
.fnk-reveal-after{clip-path:inset(0 100% 0 0)}
.fnk-before-after.is-ready .fnk-reveal-after{animation:fnkRevealAfter 8s ease-in-out infinite}
@keyframes fnkRevealBefore{0%,15%,95%,100%{clip-path:inset(0)}45%,65%{clip-path:inset(0 0 0 100%)}}
@keyframes fnkRevealAfter{0%,15%,95%,100%{clip-path:inset(0 100% 0 0)}45%,65%{clip-path:inset(0)}}
.fnk-before-after.is-ready.is-paused .fnk-reveal-after{animation-play-state:paused}
.fnk-reveal-toggle{margin-top:24px}
@media(prefers-reduced-motion:reduce){.fnk-before-after img,.fnk-before-after.is-ready .fnk-reveal-after{animation:none}.fnk-reveal-before{visibility:hidden}.fnk-reveal-after{clip-path:none}.fnk-reveal-toggle{display:none}}

.fnk-evolution-layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:center;gap:72px;margin-top:40px}
.fnk-evolution-layout .fnk-before-after{width:100%;margin:0}
.fnk-evolution-copy p{margin:0}
@media(max-width:700px){.fnk-evolution-layout{grid-template-columns:minmax(0,1fr);gap:32px}.fnk-evolution-layout .fnk-before-after{margin-inline:auto}}

.fnk-evolution-icon{display:block;width:80px;height:auto;margin:0 0 24px}

.fnk-evolution-layout .fnk-before-after{width:85%;max-width:306px}

/* White gallery surface for Food Network Kitchen icons and illustrations. */
.food-cover-page .category-icons-story{background:#fff;color:#192026;--text:#192026;--muted:#59636b;--line:#d8dcdf;border-bottom-color:#d8dcdf;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}

.food-cover-page .category-icons-story .category-icons-grid:not(.allergen-icons-row) figure{background:#fff}

.food-cover-page .category-icons-story .illustration-icons-grid .category-icon-art img{width:80.8992px;height:80.8992px}

/* Repeating scallops frame the white icon gallery. */
.food-cover-page .category-icons-story{position:relative;isolation:isolate;background:transparent;box-shadow:none;clip-path:none;border-bottom:0;margin-block:64px}
.food-cover-page .category-icons-story::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:-40px;bottom:-40px;width:calc(100vw - 112px);box-sizing:border-box;transform:translateX(-50%);border:28px solid transparent;border-image-source:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22156%22%20height%3D%22156%22%20viewBox%3D%220%200%20156%20156%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M28%202%20C53%202%2053%2026%2078%2026%20S103%202%20128%202%20C142.36%202%20154%2013.64%20154%2028%20C154%2053%20130%2053%20130%2078%20S154%20103%20154%20128%20C154%20142.36%20142.36%20154%20128%20154%20C103%20154%20103%20130%2078%20130%20S53%20154%2028%20154%20C13.64%20154%202%20142.36%202%20128%20C2%20103%2026%20103%2026%2078%20S2%2053%202%2028%20C2%2013.64%2013.64%202%2028%202Z%22%2F%3E%3C%2Fsvg%3E");border-image-slice:28 fill;border-image-width:28px;border-image-repeat:round}
@media(max-width:700px){.food-cover-page .category-icons-story{padding-inline:64px}.food-cover-page .category-icons-story::before{width:calc(100vw - 92px);border-width:18px;border-image-width:18px}}

/* Each navigation item transitions from its outline to its active artwork. */
.navigation-demo-icon{display:grid;width:100%;max-width:96px}
.navigation-demo-icon img{grid-area:1/1;display:block}
.navigation-demo-selected{opacity:0;animation:navigationActivate 8s ease-in-out infinite;animation-delay:calc(var(--step) * 1.6s)}
@keyframes navigationActivate{0%,20%,100%{opacity:0}3%,17%{opacity:1}}
@media(prefers-reduced-motion:reduce){.navigation-demo-selected{animation:none}.navigation-demo-icon:first-child .navigation-demo-selected{opacity:1}}

.navigation-story .save-recipe-copy .navigation-demo{margin:0 0 32px;padding:24px 0;background:transparent;border-radius:0}

.navigation-story .navigation-demo-icon>img:first-child{animation:navigationDeactivate 8s ease-in-out infinite;animation-delay:calc(var(--step) * 1.6s)}
@keyframes navigationDeactivate{0%,20%,100%{opacity:1}3%,17%{opacity:0}}
@media(prefers-reduced-motion:reduce){.navigation-story .navigation-demo-icon>img:first-child{animation:none}.navigation-story .navigation-demo-icon:first-child>img:first-child{opacity:0}}

.course-icon-states{display:grid;justify-items:center;gap:44px;margin-top:40px;padding:24px 0}
.course-state-label{text-align:center;font-size:12px;font-weight:700;color:#000;margin:0 0 24px}
.course-icon-row{display:grid;grid-template-columns:repeat(4,71px);gap:20px}
.course-icon-card{position:relative;width:71px;height:74px;margin:0;border:1px solid #ff626a;border-radius:4px;background:#fff;display:flex;flex-direction:column;align-items:center;padding-top:14px}
.course-icon-card.is-selected{background:#ff626a}
.course-icon-art{position:relative;height:35px;display:flex;align-items:center;justify-content:center}
.course-icon-art img{max-width:none;border-radius:0}
.course-icon-card figcaption{font-size:8px;line-height:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#000;margin:4px 0 0}
.course-icon-card.is-selected figcaption{color:#fff}
.course-icon-card .course-check{position:absolute;width:20px;height:20px;left:calc(50% - 10px);top:-11px;border-radius:0}
.course-dinner{width:47px}
.course-dinner-plate{position:absolute;width:40px;height:3.75px;border:1.5px solid #000;border-radius:3.75px;background:#89caf7;bottom:2px;left:6px}
@media(max-width:480px){.course-icon-row{grid-template-columns:repeat(2,71px);row-gap:24px}}

.story .course-icon-row .course-icon-card{margin:0;padding:14px 0 0;background:#fff;border-radius:4px;overflow:visible}
.story .course-icon-row .course-icon-card.is-selected{background:#ff626a}
.story .course-icon-card .course-icon-art img{width:auto;height:auto;max-height:none;max-width:none;border-radius:0}
.story .course-icon-card figcaption{font-size:8px;margin:4px 0 0;line-height:12px;color:#000}
.story .course-icon-card.is-selected figcaption{color:#fff}

/* Meal selections cycle like the navigation icons. */
.course-icon-demo .course-icon-art{transform:scale(1.1);transform-origin:center}
.story .course-icon-demo .course-icon-card{animation:mealCardSelect 6.4s ease-in-out infinite;animation-delay:calc(var(--meal-step) * 1.6s)}
.story .course-icon-demo .course-icon-card figcaption{animation:mealLabelSelect 6.4s ease-in-out infinite;animation-delay:calc(var(--meal-step) * 1.6s)}
.course-icon-demo .course-check{opacity:0;animation:mealCheckSelect 6.4s ease-in-out infinite;animation-delay:calc(var(--meal-step) * 1.6s)}
@keyframes mealCardSelect{0%,25%,100%{background:#fff}4%,21%{background:#ff626a}}
@keyframes mealLabelSelect{0%,25%,100%{color:#000}4%,21%{color:#fff}}
@keyframes mealCheckSelect{0%,25%,100%{opacity:0;transform:scale(.8)}4%,21%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.story .course-icon-demo .course-icon-card,.story .course-icon-demo .course-icon-card figcaption,.course-icon-demo .course-check{animation:none}.story .course-icon-demo .course-icon-card:first-child{background:#ff626a}.story .course-icon-demo .course-icon-card:first-child figcaption{color:#fff}.course-icon-demo .course-icon-card:first-child .course-check{opacity:1}}

.meal-svg-row{display:grid;grid-template-columns:repeat(4,78.1px);gap:22px}
.meal-svg-item{position:relative;width:78.1px;height:92.4px}
.story .meal-svg-item img{position:absolute;bottom:0;left:0;width:78.1px;height:auto;max-width:none;max-height:none;border-radius:0}
.meal-svg-selected{opacity:0;animation:mealSvgSelected 8.4s ease-in-out infinite;animation-delay:calc(var(--meal-step) * 2.1s)}
.meal-svg-unselected{animation:mealSvgUnselected 8.4s ease-in-out infinite;animation-delay:calc(var(--meal-step) * 2.1s)}
@keyframes mealSvgSelected{0%,25%,100%{opacity:0}4%,21%{opacity:1}}
@keyframes mealSvgUnselected{0%,25%,100%{opacity:1}4%,21%{opacity:0}}
@media(max-width:480px){.meal-svg-row{grid-template-columns:repeat(2,78.1px)}}
@media(prefers-reduced-motion:reduce){.meal-svg-item img{animation:none}.meal-svg-item:first-child .meal-svg-selected{opacity:1}.meal-svg-item:first-child .meal-svg-unselected{opacity:0}}

.navigation-demo .navigation-state-row{max-width:602.08px}

.action-icon-demo{display:flex;justify-content:center;gap:48px;margin:8px 0 40px;padding:16px 0}
.action-icon-art{display:grid;place-items:center;width:48px;height:50px}
.story .action-icon-art img{grid-area:1/1;width:auto;height:auto;max-width:none;max-height:none;border-radius:0;transform:scale(1.504)}
.action-selected{opacity:0;animation:actionIconSelected 4.8s ease-in-out infinite;animation-delay:0s}
.action-icon-item .action-unselected{animation:actionIconUnselected 4.8s ease-in-out infinite;animation-delay:0s}
@keyframes actionIconSelected{0%,33.333%,100%{opacity:0}5%,28%{opacity:1}}
@keyframes actionIconUnselected{0%,33.333%,100%{opacity:1}5%,28%{opacity:0}}
@media(prefers-reduced-motion:reduce){.action-icon-art img{animation:none}.action-icon-item:first-child .action-selected{opacity:1}.action-icon-item:first-child .action-unselected{opacity:0}}

.food-cover-page .category-icons-story .allergen-icons-row figure{background:#fff;border:1px solid #FF626A;transition:background-color 200ms ease}
@media(hover:hover){.food-cover-page .category-icons-story .allergen-icons-row figure:hover{background:#FF626A}}

.food-cover-page .category-icons-story .allergen-icons-row figure{width:calc(100% - 4px);margin:2px;justify-self:center}

.food-cover-page .category-icons-story .allergen-icons-row figcaption{font-weight:650;transition:color 200ms ease}
@media(hover:hover){.food-cover-page .category-icons-story .allergen-icons-row figure:hover figcaption{color:#fff}}

.action-icon-demo{margin-bottom:12px;padding-bottom:8px}
.action-icon-demo + .meal-svg-demo{margin-top:12px;padding-top:12px}

.food-cover-page .category-icons-story .illustration-icons-grid .category-icon-art img[src="assets/illustration-icons/sweet-tarts.svg"]{width:88.98912px;height:88.98912px}

.food-cover-page #category-icons-title{text-align:center;margin-inline:auto}

.food-cover-page .story:has(+ .category-icons-story){border-bottom:0}

.food-cover-page .category-icons-story > .icons-intro-copy{text-align:center;margin-inline:auto;color:#59636b}

#category-tiles .cnn-category-grid img{position:relative;transform-origin:center;transition:transform 200ms ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){#category-tiles .cnn-category-grid img:hover{transform:scale(1.06);z-index:1}}

.cnn-screen-grid img{transform-origin:center;transition:transform 200ms ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cnn-screen-grid img:hover{transform:scale(1.04)}}

#series-artwork .cnn-artwork-grid img{transform-origin:center;transition:transform 200ms ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){#series-artwork .cnn-artwork-grid img:hover{transform:scale(1.02)}}

/* Consistent heading-to-copy spacing; preserve recognition and embedded quiz designs. */
body :is(h1,h2,h3,h4,h5,h6):has(+ p):not(.recognition-story *, .mvc-quiz-demo *){margin-bottom:10px}
body :is(h1,h2,h3,h4,h5,h6) + p:not(.recognition-story *, .mvc-quiz-demo *){margin-top:0}

/* Standalone Food Network icon and illustration case study. */
.icons-case-link .pill{display:inline-flex;margin-top:24px}
.project-image.icons-project-preview{display:flex;align-items:center;justify-content:center;gap:7%;background:#fff;padding:48px}
.project-image.icons-project-preview img{width:24%;height:auto;max-height:180px;object-fit:contain}
.icons-case-page .case-hero h1{max-width:1000px}
@media(max-width:700px){.project-image.icons-project-preview{padding:28px}.icons-case-page .case-hero h1{font-size:clamp(40px,10vw,64px)}}
.icons-case-page .case-hero{padding-top:160px}

.icons-case-preview{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:clamp(12px,4vw,56px);padding:clamp(20px,4vw,48px);margin-top:32px;background:#fff;border-radius:6px}
.icons-case-preview img{width:76.5%;max-width:85.68px;aspect-ratio:1;object-fit:contain;justify-self:center}

/* Food Network artwork expands from its center on hover. */
.card-styles-grid img,.app-of-the-day-grid img,.connected-tv-grid img{transform-origin:center center;transition:transform 200ms ease;position:relative}
@media(hover:hover){.card-styles-grid img:hover{transform:scale(1.06);z-index:1}.app-of-the-day-grid img:hover,.connected-tv-grid img:hover{transform:scale(1.04);z-index:1}}
@media(prefers-reduced-motion:reduce){.card-styles-grid img,.app-of-the-day-grid img,.connected-tv-grid img{transition:none}}

/* Compact spacing between metric values and their supporting labels. */
.stat strong+p{margin-top:6px}
.case-body :is(.nbcu-impact-grid,.mvc-impact) h3:has(+p){margin-bottom:6px}

/* Consistent tracking for primary hero and case-study cover headings. */
body .hero h1,body .hero h1 em,body .case-hero h1,body .case-hero h2,body .case-hero h2 em,body :is(.cnn-cover-caption,.mvc-cover-caption,.fnk-stack-cover-caption,.nbcu-cover-caption) h1{letter-spacing:-1px}

/* Preserve the full Figma homepage thumbnail composition. */
.project-image.nbcu{aspect-ratio:1.45}
.project-image.nbcu img{width:100%;height:100%;object-fit:cover}

.cnn-breakpoints img{transform-origin:center;transition:transform 200ms ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cnn-breakpoints img:hover{transform:scale(1.02)}}

.cnn-series-browsing img{transform-origin:center;transition:transform 200ms ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cnn-series-browsing img:hover{transform:scale(1.02)}}

/* Crop the source slide to its artwork, retaining the original asset. */
.cnn-watch-live-crop{position:relative;aspect-ratio:2630/1506;overflow:hidden;transform-origin:center;transition:transform 200ms ease}
.cnn-watch-live .cnn-watch-live-crop img{display:block;width:100%;max-width:none;max-height:none;height:auto;border-radius:0}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cnn-watch-live-crop:hover{transform:scale(1.02)}}

.story .cnn-live-promotions img{width:100%;height:auto;max-height:none;transform-origin:center;transition:transform 200ms ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cnn-live-promotions img:hover{transform:scale(1.02)}}

.story .cnn-coming-soon img{width:100%;height:auto;max-height:none;transform-origin:center;transition:transform 200ms ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cnn-coming-soon img:hover{transform:scale(1.02)}}

.project-image.creative-vision-preview{padding:0;position:relative}
.creative-vision-layers{position:absolute;inset:0;transition:transform .35s ease}
.project-image .creative-vision-landscape{position:absolute;top:0;left:-.59%;width:133.67%;height:100%;object-fit:cover}
.project-image .creative-vision-goggles{position:absolute;left:22.375%;top:50%;width:55.25%;height:auto;object-fit:contain;transform:translateY(-50%)}
.project:hover .creative-vision-landscape{transform:none}
.project .project-image img.creative-vision-goggles,.project:hover .project-image img.creative-vision-goggles{transform:translateY(-50%);transition:none}
.project:hover .creative-vision-layers{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){.creative-vision-layers{transition:none}.project:hover .creative-vision-layers{transform:none}}

/* Project titles use the available card width and wrap naturally. */
#work .featured .project-info{display:block}
#work .project-info h2{white-space:normal}

/* Fire TV screens retain their full widescreen compositions. */
.connected-tv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;margin-top:36px}
.story .connected-tv-grid figure{margin:0;padding:0;background:transparent}
.story .connected-tv-grid img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:16/9;border-radius:4px}
.connected-tv-grid figcaption{margin-top:12px;color:var(--muted);font-size:14px}
@media(max-width:700px){.connected-tv-grid{grid-template-columns:1fr;gap:24px}}

/* CNN homepage artwork rotation. */
.project-image.cnn-home-rotation{position:relative;padding:0}
.project-image.cnn-home-rotation .cnn-home-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 700ms ease,transform 350ms ease}
.project-image.cnn-home-rotation .cnn-home-slide.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.project-image.cnn-home-rotation .cnn-home-slide{transition:none}}

/* Disney+ email demo over the supplied aurora artwork. */
.project-image.disney-email-preview{position:relative;padding:0;isolation:isolate;container-type:inline-size}
.disney-email-background{position:absolute;inset:0;overflow:hidden;background:#200909;transition:transform .35s ease}
.disney-email-background::before{content:"";position:absolute;width:117.206%;height:159.275%;left:50.0735%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#000 0%,#003547 38%,#007185 62.5%,#01aaa5 80.5%,#66e3d2 100%)}
.disney-email-background::after{content:"";position:absolute;width:151.765%;height:102.584%;left:50%;top:51.292%;transform:translate(-50%,-50%) scaleX(-1);background:url("assets/disney-email/background.png") center/cover no-repeat;filter:blur(3.311px)}
.project:hover .disney-email-background{transform:scale(1.025)}
.disney-email-phone{position:absolute;width:27.6%;aspect-ratio:375/812;left:36.2%;top:6.7%;border:1.06cqw solid transparent;border-radius:3.18cqw;overflow:hidden;background:linear-gradient(#003547,#003547) padding-box,linear-gradient(to bottom,#1c4451,#00698d) border-box;color:white;box-shadow:0 12px 30px #0004;font-family:Arial,sans-serif;font-size:1.03cqw}
.disney-email-status{position:absolute;z-index:2;inset:0 0 auto;height:3.4cqw;display:flex;align-items:center;justify-content:space-around;background:#252525;font-size:.85cqw}
.disney-email-status i{width:7.7cqw;height:2.1cqw;border-radius:30px;background:#000}
.disney-email-scroll{padding-top:3.4cqw;animation:disneyEmailScroll 30s ease-in-out infinite;animation-play-state:paused}
.disney-email-preview.is-playing .disney-email-scroll{animation-play-state:running}
.disney-email-mailhead{background:#303030;padding:0 1.1cqw 1.2cqw;line-height:1.5}
.disney-email-inbox{color:#3a82f7;border-bottom:1px solid #555;padding-bottom:.8cqw}
.disney-email-sender{display:flex;align-items:center;gap:.7cqw;padding:.8cqw 0}
.disney-email-sender small{margin-left:auto;color:#959595;font-size:.85cqw}
.project .project-image.disney-email-preview img,.project:hover .project-image.disney-email-preview img{display:block;width:100%;height:auto;object-fit:contain;transform:none;transition:none}
.project .project-image.disney-email-preview .disney-email-sender img{width:2.5cqw;height:auto}
.disney-email-last{aspect-ratio:375/531.362;overflow:hidden}
@keyframes disneyEmailScroll{0%,12%{transform:translateY(0)}80%,92%{transform:translateY(calc(-100% + 56.5cqw))}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.disney-email-scroll{animation:none}.project:hover .disney-email-background{transform:none}.disney-email-background{transition:none}}

/* Keep the complete mail header above the scrolling email body. */
.disney-email-phone{display:flex;flex-direction:column}
.disney-email-status{position:relative;flex:0 0 3.4cqw}
.disney-email-mailhead{position:relative;z-index:2;flex:none}
.disney-email-content-viewport{flex:1;min-height:0;overflow:hidden;container-type:size}
.disney-email-scroll{padding-top:0}
@keyframes disneyEmailScroll{0%,12%{transform:translateY(0)}80%,92%{transform:translateY(calc(-100% + 100cqh + 3px))}100%{transform:translateY(0)}}

/* Exact Figma mail header geometry, scaled as a single fixed layer. */
.disney-email-header{position:relative;flex:none;width:100%;aspect-ratio:375/205.612;overflow:hidden;background:#1c1c1c;z-index:2}
.disney-email-header-art{position:absolute;left:0;top:0;width:375px;height:205.612px;transform:scale(var(--email-header-scale,.46));transform-origin:top left;font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:14.016px;line-height:1.25;color:white}
.disney-email-header-art>span,.disney-email-header-art>strong{position:absolute;white-space:nowrap}
.disney-email-header-art em{font-style:normal;color:#959595}
.disney-email-header-art .email-time{font-size:15.7px;font-weight:600;letter-spacing:-.44px}
.email-island{position:absolute;left:132.56px;top:12px;width:109.883px;height:32.267px;border-radius:100px;background:black}
.disney-email-header-art .email-inbox-label{font-size:16.018px;color:#3a82f7}
.email-sender-name{font-weight:600}.email-sent-time{color:#959595}
.disney-email-header-art>strong{font-size:16.018px}
.project .project-image.disney-email-preview .disney-email-header-art img{position:absolute;display:block;width:auto;height:auto;max-width:none;transition:none}
.project .project-image.disney-email-preview .disney-email-header-art .email-header-logo{width:33.788px;height:20.872px}

/* Supplied Shiro wordmark, shared by site headers and footers. */
.wordmark img{display:block;width:76px;height:auto;max-width:none}

/* Full-width glass backdrop appears only after the page starts scrolling. */
body>.site-header{position:sticky;top:0;z-index:100;isolation:isolate}
body>.site-header::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 75%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity 180ms ease}
body>.site-header.is-scrolled::before{opacity:1}
@media(prefers-reduced-motion:reduce){body>.site-header::before{transition:none}}

/* Feather the glass backdrop below the navigation instead of ending abruptly. */
body>.site-header.is-scrolled{border-bottom-color:transparent}
body>.site-header::before{bottom:-12px;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 12px),transparent 100%)}

footer .linkedin-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
footer .linkedin-link img{display:block;width:26px;height:auto}

footer .footer-credits{text-align:center}
footer .footer-credits p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
footer .footer-credits p+p{margin-top:4px}
@media(max-width:700px){footer .footer-credits{order:3;flex-basis:100%}footer .footer-credits p{font-size:11px}}

/* Selected primary navigation: 200 units heavier than the regular 400 weight. */
.site-header nav a[aria-current="page"]{font-weight:600;color:#fff;text-decoration:none}

.site-header nav .nav-linkedin{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.site-header nav .nav-linkedin img{width:26px;height:auto}

/* Preserve the LinkedIn artwork while tinting it with the brand hover color. */
.site-header nav .nav-linkedin,footer .linkedin-link{position:relative}
.site-header nav .nav-linkedin::after,footer .linkedin-link::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;aspect-ratio:840 / 779;background:#2867B2;-webkit-mask:url("assets/linkedin-white.png") center / contain no-repeat;mask:url("assets/linkedin-white.png") center / contain no-repeat;opacity:0;pointer-events:none}
.site-header nav .nav-linkedin:hover::after,footer .linkedin-link:hover::after{opacity:1}
.site-header nav .nav-linkedin:hover img,footer .linkedin-link:hover img{opacity:0}

:root{--card-radius:16px}

.food-cover-page .icons-case-link .pill{font-weight:600;background:#fff;color:#111214;border-color:#fff;transition:background-color .2s,border-color .2s,color .2s}
.food-cover-page .icons-case-link .pill:hover{background:var(--accent);border-color:var(--accent);color:#111214}

/* Match the icon case study's gentle hover growth. */
.icons-case-preview img{transition:transform 200ms ease;transform-origin:center}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .icons-case-preview img:hover{transform:translateY(-3px) scale(1.05)}
}

/* Filled call-to-action buttons; playback controls retain their subtle styles. */
body main .pill{
 background:#fff;color:#111214;border:1px solid #fff;font-weight:600;
 transition:background-color .2s,border-color .2s,color .2s;
}
body main .pill:hover{
 background:#a8d9f3;border-color:#a8d9f3;color:#111214;
}

.fnk-next-chapter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.fnk-next-chapter-copy>p:not(.eyebrow){font-size:18px;color:var(--muted);margin:16px 0 24px}
.fnk-next-chapter-preview{display:block;padding:12px;background:var(--surface);border-radius:16px;overflow:hidden}
.fnk-next-chapter-image>img{width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:10px}
.fnk-next-chapter-preview>span{display:flex;justify-content:space-between;gap:16px;padding:18px 4px 8px;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.5px}
@media(max-width:700px){.fnk-next-chapter{grid-template-columns:1fr;gap:28px}.fnk-next-chapter-copy>p:not(.eyebrow){font-size:17px}.fnk-next-chapter-copy .pill{white-space:normal;text-align:center}}

.fnk-next-chapter-brand{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 4px 0}
.fnk-next-chapter-brand>img{width:45.864px;height:48.048px;object-fit:contain}
.fnk-next-chapter-brand .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.09em;text-align:right;margin:0}
@media(max-width:700px){.fnk-next-chapter-brand{margin:8px 0 0}.fnk-next-chapter-brand>img{width:33.022px;height:34.595px}.fnk-next-chapter-brand .eyebrow{font-size:10px}.fnk-next-chapter-preview>span{padding:12px 0 8px}}

/* Match homepage card shadow and thumbnail zoom. */
.fnk-next-chapter-preview{transition:box-shadow .2s}
.fnk-next-chapter-image{overflow:hidden;border-radius:10px}
.fnk-next-chapter-image>img{transition:transform .5s}
.fnk-next-chapter-preview:hover{box-shadow:0 12px 32px #0002}
.fnk-next-chapter-preview:hover .fnk-next-chapter-image>img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){
 .fnk-next-chapter-preview,.fnk-next-chapter-image>img{transition:none}
 .fnk-next-chapter-preview:hover .fnk-next-chapter-image>img{transform:none}
}

/* Mobile layout for the standalone icon gallery. */
@media(max-width:700px){
 .icons-case-page .case-hero{padding-top:112px;padding-bottom:32px}
 .icons-case-page .case-hero h1{font-size:36px;line-height:40px;letter-spacing:-1px;font-weight:600;margin-block:16px}
 .icons-case-page .case-deck{font-size:17px;line-height:27px}
 .icons-case-page .case-meta{grid-template-columns:1fr;gap:20px;margin-top:28px}
 .icons-case-page .category-icons-story{padding:24px 20px;margin-block:40px 64px}
 .icons-case-page .category-icons-story::before{width:calc(100vw - 24px);top:-20px;bottom:-20px;border-width:14px;border-image-width:14px}
 .icons-case-page #category-icons-title{font-size:30px;line-height:33px;letter-spacing:-1px}
 .icons-case-page .icons-intro-copy{font-size:16px;line-height:26px}
 .icons-case-page .navigation-states{padding:20px 0;margin-top:24px}
 .icons-case-page .navigation-state-row{gap:8px}
 .icons-case-page .action-icon-demo{gap:32px;margin-block:8px 24px}
 .icons-case-page .course-icon-states{margin-top:24px;padding-block:8px;gap:24px}
 .icons-case-page .meal-svg-row{grid-template-columns:repeat(2,78.1px);gap:20px 32px}
 .icons-case-page .category-icons-story .category-icons-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
 .icons-case-page .category-icons-story .category-icons-grid figure{width:100%;height:auto;aspect-ratio:1;min-width:0}
 .icons-case-page .category-icon-art{width:100%;display:grid;place-items:center}
 .icons-case-page .category-icons-story .category-icon-art img{width:70%;height:auto;aspect-ratio:1;max-width:72px}
 .icons-case-page .category-icons-story .illustration-icons-grid .category-icon-art img{width:78%;height:auto;max-width:80px}
 .icons-case-page .category-icons-story .allergen-icons-row figure{margin:0;padding:8px 4px;gap:4px}
 .icons-case-page .allergen-icons-row .category-icon-art img{width:90%;max-width:76px}
 .icons-case-page .category-icons-story .allergen-icons-row figcaption{font-size:11px;line-height:14px;overflow-wrap:anywhere}
}
@media(max-width:700px){.icons-case-page .category-icons-story .illustration-icons-grid .category-icon-art img[src="assets/illustration-icons/sweet-tarts.svg"]{width:85%;height:auto;max-width:80px}}
/* Match category artwork to the larger illustrations without intrinsic SVG shrinkage. */
@media(max-width:700px){
 .icons-case-page .category-icons-story .category-icons-grid:not(.allergen-icons-row):not(.illustration-icons-grid) .category-icon-art img{width:64px;height:64px;max-width:100%;object-fit:contain}
}

/* Omit allergens from the mobile icon gallery. */
@media(max-width:700px){.icons-case-page .allergen-icons-panel{display:none}}

/* Enlarge the complete navigation artwork, including its labels, on mobile. */
@media(max-width:700px){.icons-case-page .navigation-demo-icon{transform:scale(1.15)}}

/* Match the mobile preview to the full category icon gallery. */
@media(max-width:700px){
 .icons-case-preview{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
 .icons-case-preview img{width:64px;height:64px;max-width:100%;object-fit:contain}
}

/* Complete the mobile preview with two additional category icons. */
.icons-case-preview .mobile-preview-icon{display:none}
@media(max-width:700px){.icons-case-preview .mobile-preview-icon{display:block}}

/* Optically balance the pumpkin in both mobile icon galleries. */
@media(max-width:700px){
 .icons-case-preview img[src*="category-icons/fall.svg"],
 .icons-case-page .category-icons-story .category-icons-grid:not(.allergen-icons-row):not(.illustration-icons-grid) .category-icon-art img[src*="category-icons/fall.svg"]{width:60.8px;height:60.8px}
}

/* Optically balance pasta in both mobile icon galleries. */
@media(max-width:700px){
 .icons-case-preview img[src*="category-icons/pasta.svg"],
 .icons-case-page .category-icons-story .category-icons-grid:not(.allergen-icons-row):not(.illustration-icons-grid) .category-icon-art img[src*="category-icons/pasta.svg"]{width:60.16px;height:60.16px}
}

/* Optically balance pies in both mobile icon galleries. */
@media(max-width:700px){
 .icons-case-preview img[src*="category-icons/pies.svg"],
 .icons-case-page .category-icons-story .category-icons-grid:not(.allergen-icons-row):not(.illustration-icons-grid) .category-icon-art img[src*="category-icons/pies.svg"]{width:67.84px;height:67.84px}
}

/* Overlap the scalloped border's center to avoid mobile subpixel seams. */
@media(max-width:700px){
 .icons-case-page .category-icons-story::before{background:linear-gradient(#fff,#fff) center / calc(100% - 26px) calc(100% - 26px) no-repeat;background-origin:border-box}
 .icons-case-page .illustration-icons-grid{display:none}
}