:root{--bg:#070707;--fg:#f2f2ef;--muted:#8d8d89;--line:#292929;--pad:clamp(22px,3.8vw,62px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;width:100%}
.topbar{height:124px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid #111}
.brand{display:flex;align-items:center;gap:17px;font-family:"Archivo Narrow",Arial,sans-serif;font-size:17px;line-height:1.12;letter-spacing:.18em}.brand img{width:72px;height:72px;object-fit:contain}
nav{display:flex;gap:52px}nav a{font-family:"Archivo Narrow";font-size:14px;letter-spacing:.18em;padding-bottom:8px;opacity:.55}nav a.active,nav a:hover{opacity:1}nav a.active{border-bottom:1px solid var(--fg)}
.hero{display:grid;grid-template-columns:31% 69%;min-height:420px;border-bottom:1px solid var(--line)}
.hero-copy{padding:68px 34px 56px var(--pad);display:flex;flex-direction:column;justify-content:center}
.hero-kicker{margin:0 0 23px;color:#696964;font:500 9px/1.5 "Archivo Narrow";letter-spacing:.2em}
.hero h1{margin:0 0 30px;font-family:"Archivo Narrow";font-size:clamp(45px,4.2vw,75px);line-height:.96;letter-spacing:.02em;font-weight:500}
.watch{align-self:flex-start;border:0;border-bottom:1px solid #999;background:none;color:var(--fg);padding:0 0 5px;font:400 13px "Archivo Narrow";letter-spacing:.17em;cursor:pointer}
.hero-media{position:relative;min-height:420px;overflow:hidden}.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.media-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.32),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.18),transparent 50%)}
.counter{position:absolute;right:24px;bottom:16px;font:400 11px "Archivo Narrow";letter-spacing:.18em}
.work{display:grid;grid-template-columns:14% 86%;padding:44px var(--pad) 55px;border-bottom:1px solid var(--line)}.work-side{display:flex;flex-direction:column;justify-content:space-between;padding-right:30px}
.label{margin:0;font:400 11px "Archivo Narrow";letter-spacing:.2em;color:#c9c9c5}.small-link{width:max-content;padding-bottom:5px;border-bottom:1px solid #666;font:400 10px "Archivo Narrow";letter-spacing:.18em}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.thumb{display:block;overflow:hidden;background:#111;aspect-ratio:16/10}.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s ease}.thumb:hover img{transform:scale(1.015);filter:brightness(1.07)}
.project-info{display:grid;grid-template-columns:24px 1fr;gap:9px;padding-top:13px}.project-info span{font:400 10px "Archivo Narrow";letter-spacing:.12em;color:#777}.project-info h2{margin:0 0 4px;font:500 20px "Archivo Narrow";letter-spacing:.07em}.project-info p{margin:0;color:var(--muted);font-size:11px;line-height:1.4}
.home-about{display:grid;grid-template-columns:14% 86%;padding:74px var(--pad) 82px;border-bottom:1px solid var(--line)}
.home-about-side{display:flex;min-height:250px;flex-direction:column;justify-content:space-between;padding-right:30px}
.home-about-index,.about-index{margin:0;color:#5f5f5b;font:400 9px/1.5 "Archivo Narrow";letter-spacing:.18em}
.home-about-main{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(42px,7vw,110px);align-items:end;min-width:0}
.home-about h2{margin:0;font:500 clamp(44px,4.6vw,74px)/.87 "Archivo Narrow";letter-spacing:.015em}
.home-about-copy{max-width:570px;padding-bottom:3px}
.home-about-copy p{margin:0 0 28px;color:#b5b5b0;font-size:15px;line-height:1.75}
.text-link{display:inline-block;padding-bottom:5px;border-bottom:1px solid #666;font:500 11px "Archivo Narrow";letter-spacing:.17em}
footer{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:50px;padding:28px var(--pad) 36px}footer p,footer a,footer span{font-size:10px;color:#8d8d89;line-height:1.55}footer .label{color:#b9b9b5;margin-bottom:6px}
@media(max-width:900px){.topbar{height:90px}.brand img{width:54px;height:54px}nav{gap:20px}.hero{grid-template-columns:1fr}.hero-copy{padding:55px var(--pad) 40px}.hero-media{min-height:52vw}.work{grid-template-columns:1fr}.work-side{gap:28px;margin-bottom:30px}.projects{grid-template-columns:1fr}.home-about{grid-template-columns:1fr;gap:34px}.home-about-side{min-height:0;flex-direction:row;align-items:center;padding-right:0}.home-about-main{grid-template-columns:1fr 1fr;gap:42px}footer{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.brand{font-size:14px}.brand span{display:block}nav{gap:14px}nav a{font-size:12px;letter-spacing:.12em}.projects{gap:40px}.home-about{padding-top:58px;padding-bottom:64px}.home-about-main{grid-template-columns:1fr;gap:30px}.home-about h2{font-size:14vw}.home-about-copy p{font-size:14px;line-height:1.7}footer{grid-template-columns:1fr}}

/* ABOUT */
.about-page{border-bottom:1px solid var(--line)}
.about-hero{display:grid;grid-template-columns:14% 86%;padding:88px var(--pad) 96px}
.about-rail{display:flex;min-height:620px;flex-direction:column;justify-content:space-between;padding-right:30px}
.about-hero-main{min-width:0}
.about-hero h1{max-width:1080px;margin:0;font:500 clamp(72px,8.7vw,146px)/.79 "Archivo Narrow";letter-spacing:.005em}
.about-lead-row{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(48px,8vw,130px);align-items:start;margin-top:78px;padding-top:26px;border-top:1px solid var(--line)}
.about-lead{max-width:690px;margin:0;color:#c7c7c2;font-size:clamp(16px,1.4vw,21px);line-height:1.65}
.about-client-list p:last-child{margin:19px 0 0;color:#8d8d89;font:500 13px/1.8 "Archivo Narrow";letter-spacing:.12em}
.about-worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 var(--pad) 100px;border:1px solid var(--line);background:var(--line)}
.about-world{min-width:0;margin:0;background:var(--bg)}
.about-world img{aspect-ratio:16/10;height:auto;object-fit:cover}
.about-world figcaption{display:flex;gap:14px;min-height:46px;align-items:center;padding:12px 14px;color:#b6b6b1;font:500 10px "Archivo Narrow";letter-spacing:.16em}
.about-world figcaption span{color:#62625e}
.about-story{display:grid;grid-template-columns:14% 86%;padding:96px var(--pad) 110px;border-top:1px solid var(--line)}
.about-story-side{display:flex;min-height:540px;flex-direction:column;justify-content:space-between;padding-right:30px}
.about-story-main{min-width:0}
.about-story-heading{display:grid;grid-template-columns:1fr .82fr;gap:clamp(46px,8vw,130px);align-items:start}
.about-story h2,.about-capabilities h2{margin:0;font:500 clamp(56px,6.5vw,108px)/.83 "Archivo Narrow";letter-spacing:.01em}
.about-story-heading>p{max-width:590px;margin:7px 0 0;color:#aaa;font-size:15px;line-height:1.75}
.about-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:86px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--line)}
.about-detail-grid article{min-height:310px;padding:24px 34px 32px 0;background:var(--bg)}
.about-detail-grid article+article{padding-left:34px}
.about-detail-number{margin:0 0 78px;color:#62625e;font:400 9px "Archivo Narrow";letter-spacing:.19em}
.about-detail-grid h3{margin:0 0 20px;font:500 26px/.98 "Archivo Narrow";letter-spacing:.04em}
.about-detail-grid article>p:last-child{max-width:470px;margin:0;color:#92928d;font-size:13px;line-height:1.7}
.about-capabilities{padding:96px var(--pad) 110px;border-top:1px solid var(--line)}
.about-capabilities-heading{display:grid;grid-template-columns:14% 86%;align-items:start}
.capability-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:76px 0 0 14%;padding:0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.capability-list li{display:flex;min-height:142px;flex-direction:column;justify-content:space-between;padding:19px 18px 22px;border-left:1px solid var(--line)}
.capability-list li:nth-child(3n+1){border-left:0}.capability-list li:nth-child(n+4){border-top:1px solid var(--line)}
.capability-list span{color:#62625e;font:400 9px "Archivo Narrow";letter-spacing:.17em}
.capability-list strong{font:500 15px/1.2 "Archivo Narrow";letter-spacing:.1em}
.about-cta{padding:120px var(--pad) 132px;border-top:1px solid var(--line)}
.about-cta>a{display:inline-block;margin-top:42px;font:500 clamp(62px,9vw,150px)/.78 "Archivo Narrow";letter-spacing:.005em}

@media(max-width:900px){
  .about-hero,.about-story{grid-template-columns:1fr;gap:42px}
  .about-rail,.about-story-side{min-height:0;flex-direction:row;align-items:flex-start;padding-right:0}
  .about-hero h1{font-size:clamp(70px,14vw,122px)}
  .about-lead-row{margin-top:58px}
  .about-worlds{margin-bottom:72px}
  .about-story-heading{grid-template-columns:1fr;gap:34px}
  .about-detail-grid{margin-top:62px}
  .about-capabilities-heading{grid-template-columns:1fr;gap:34px}
  .capability-list{margin-left:0;margin-top:56px}
}

@media(max-width:560px){
  .about-hero{padding-top:58px;padding-bottom:68px;gap:38px}
  .about-rail,.about-story-side{gap:20px}
  .about-hero h1{font-size:17vw;line-height:.82}
  .about-lead-row{grid-template-columns:1fr;gap:42px;margin-top:44px;padding-top:21px}
  .about-lead{font-size:16px}
  .about-worlds{grid-template-columns:1fr 1fr;margin:0 var(--pad) 62px}
  .about-world-wide{grid-column:1/-1}
  .about-world figcaption{min-height:56px;align-items:flex-start;font-size:8px;line-height:1.4}
  .about-story{padding-top:64px;padding-bottom:72px;gap:38px}
  .about-story h2,.about-capabilities h2{font-size:14vw}
  .about-story-heading>p{font-size:14px}
  .about-detail-grid{grid-template-columns:1fr;margin-top:50px}
  .about-detail-grid article,.about-detail-grid article+article{min-height:0;padding:23px 0 34px}
  .about-detail-grid article+article{border-top:1px solid var(--line)}
  .about-detail-number{margin-bottom:42px}
  .about-capabilities{padding-top:64px;padding-bottom:72px}
  .capability-list{grid-template-columns:1fr 1fr;margin-top:43px}
  .capability-list li{min-height:112px;padding:15px 12px 17px;border-left:1px solid var(--line)}
  .capability-list li:nth-child(3n+1){border-left:1px solid var(--line)}
  .capability-list li:nth-child(odd){border-left:0}
  .capability-list li:nth-child(n+3){border-top:1px solid var(--line)}
  .capability-list strong{font-size:12px}
  .about-cta{padding-top:72px;padding-bottom:80px}
  .about-cta>a{margin-top:30px;font-size:13vw;overflow-wrap:anywhere}
}

/* CASE STUDY */
.case-study{--peach:#ef6e34;border-bottom:1px solid var(--line)}
.case-intro{padding:72px var(--pad) 58px;display:grid;grid-template-columns:14% 1.3fr .7fr;gap:clamp(24px,4vw,70px);align-items:end}
.case-intro h1{margin:0;font:500 clamp(70px,10vw,170px)/.78 "Archivo Narrow",Arial,sans-serif;letter-spacing:.01em}
.case-summary{padding-bottom:6px}.case-summary>p:first-child{margin:0 0 28px;max-width:430px;color:#aaa;font-size:15px;line-height:1.65}.case-services{margin:0;color:#777;font:400 10px "Archivo Narrow";letter-spacing:.18em;line-height:1.6}
.case-media{margin:0 var(--pad);aspect-ratio:16/9;overflow:hidden;background:#111}.case-media img,.case-media video{display:block;width:100%;height:100%;object-fit:cover}
.case-note{padding:54px var(--pad) 84px;display:grid;grid-template-columns:14% minmax(0,820px);gap:clamp(24px,4vw,70px)}.case-note>p:last-child{margin:0;font:400 clamp(28px,3vw,48px)/1.08 "Archivo Narrow";letter-spacing:.015em}
.case-chapter{position:relative;padding:88px var(--pad);border-top:1px solid var(--line);overflow:hidden}
.chapter-copy{display:grid;grid-template-columns:14% 1.2fr .8fr;gap:clamp(24px,4vw,70px);align-items:start;margin-bottom:64px}.chapter-copy h2,.film-heading h2{margin:0;font:500 clamp(46px,6vw,96px)/.88 "Archivo Narrow",Arial,sans-serif;letter-spacing:.015em}.chapter-copy>p:last-child,.film-heading>p:last-child{margin:6px 0 0;max-width:500px;color:#9a9a95;font-size:14px;line-height:1.7}.chapter-copy-wide{grid-template-columns:14% 1fr 1fr}
.character-scene{position:relative;min-height:650px;background:radial-gradient(circle at 50% 48%,#2b2926 0,#131313 43%,#090909 76%);border:1px solid #222;overflow:hidden}.character-scene:before,.character-scene:after{content:"";position:absolute;background:#242422}.character-scene:before{left:50%;top:0;width:1px;height:100%}.character-scene:after{left:0;top:50%;width:100%;height:1px}.peach-orbit{position:absolute;left:50%;top:50%;width:clamp(270px,32vw,510px);aspect-ratio:1;border:1px solid rgba(239,110,52,.48);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 100px rgba(239,110,52,.08),inset 0 0 70px rgba(239,110,52,.06)}.peach-orbit:after{content:"";position:absolute;inset:9%;border:1px solid rgba(239,110,52,.12);border-radius:50%}.pilfer-figure{position:absolute;width:auto;object-fit:contain;z-index:2}.pilfer-confident{height:86%;left:50%;bottom:-3%;transform:translateX(-50%)}.pilfer-hiding{height:66%;left:-2.5%;bottom:-6%;transform:rotate(-2deg)}.pilfer-running{height:68%;right:-1%;bottom:-5%;transform:rotate(1deg)}.scene-caption{position:absolute;z-index:3;left:24px;bottom:18px;margin:0;color:#7c7c76;font:400 10px "Archivo Narrow";letter-spacing:.23em}
.storyboard-chapter{background:#0a0a0a}.storyboard-layout{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#292929;border:1px solid #292929}.board-card{min-width:0;background:#0b0b0b}.board-visual{aspect-ratio:16/9;background-repeat:no-repeat;background-color:#e8e7e2;filter:grayscale(.12) contrast(1.04);transition:filter .25s ease}.board-card:hover .board-visual{filter:grayscale(0) contrast(1.02)}.story-frame{background-image:url("assets/pilfer/storyboard-01.webp");background-size:400% auto}.dream-a{background-image:url("assets/pilfer/storyboard-02.webp");background-size:400% auto}.dream-b{background-image:url("assets/pilfer/storyboard-03.webp");background-size:400% auto}.frame-1{background-position:0 0}.frame-2{background-position:33.333% 0}.frame-3{background-position:66.667% 0}.frame-4{background-position:100% 0}.story-frame.frame-5{background-position:0 76%}.story-frame.frame-6{background-position:33.333% 76%}.story-frame.frame-7{background-position:66.667% 76%}.story-frame.frame-8{background-position:100% 76%}.board-caption{min-height:152px;padding:18px 18px 22px;border-top:1px solid #292929}.board-caption span{display:block;margin-bottom:17px;color:var(--peach);font:400 9px "Archivo Narrow";letter-spacing:.18em}.board-caption h3{margin:0 0 7px;font:500 20px "Archivo Narrow";letter-spacing:.045em}.board-caption p{margin:0;color:#858580;font-size:11px;line-height:1.5}.chapter-character{position:absolute;z-index:1;width:auto;object-fit:contain;pointer-events:none}.chapter-sneaking{height:390px;right:-48px;top:56px;opacity:.5}.chapter-wink{height:330px;right:-38px;top:35px;opacity:.5}.storyboard-chapter .chapter-copy,.dream-chapter .chapter-copy{position:relative;z-index:2}
.case-film{padding:88px var(--pad) 105px;border-top:1px solid var(--line)}.film-heading{display:grid;grid-template-columns:14% 1.2fr .8fr;gap:clamp(24px,4vw,70px);align-items:start;margin-bottom:48px}.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#111;overflow:hidden}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dream-chapter{background:#0c0c0b}.case-film-final{background:linear-gradient(180deg,#080808 0,#0d0a08 100%)}
.case-back{display:inline-block;margin:0 var(--pad) 60px;padding-bottom:5px;border-bottom:1px solid #666;font:400 11px "Archivo Narrow";letter-spacing:.18em}
@media(max-width:1100px){.storyboard-layout{grid-template-columns:repeat(2,1fr)}.chapter-sneaking,.chapter-wink{opacity:.22}}
@media(max-width:900px){.case-intro{grid-template-columns:1fr;padding-top:54px}.case-intro h1{font-size:clamp(72px,18vw,130px)}.case-summary{max-width:620px}.case-note,.chapter-copy,.chapter-copy-wide,.film-heading{grid-template-columns:1fr}.case-media{aspect-ratio:4/3}.case-chapter,.case-film{padding-top:64px;padding-bottom:72px}.chapter-copy,.film-heading{margin-bottom:40px}.character-scene{min-height:500px}.pilfer-confident{height:78%}.pilfer-hiding,.pilfer-running{height:58%}.chapter-character{display:none}}
@media(max-width:700px){.character-scene{min-height:430px}.pilfer-hiding{left:-17%}.pilfer-running{right:-15%}.storyboard-layout{gap:1px}.board-caption{min-height:142px;padding:15px}.board-caption h3{font-size:18px}}
@media(max-width:560px){.case-intro h1{font-size:25vw}.case-media{margin:0;aspect-ratio:1/1}.case-note{padding-top:40px;padding-bottom:58px}.case-chapter,.case-film{padding-top:52px;padding-bottom:58px}.chapter-copy h2,.film-heading h2{font-size:14vw}.character-scene{min-height:360px;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);border-left:0;border-right:0}.pilfer-confident{height:72%}.pilfer-hiding,.pilfer-running{height:51%}.scene-caption{left:var(--pad);font-size:9px}.storyboard-layout{grid-template-columns:1fr}.board-visual{aspect-ratio:1.78}.board-caption{min-height:0;padding:15px 16px 18px}.board-caption span{margin-bottom:10px}.board-caption p{font-size:12px}}

/* Reliable storyboard crops */
.board-visual{overflow:hidden;background-image:none!important}
.board-visual img{width:100%;height:100%;object-fit:cover}

/* Purpose-built mobile character composition */
@media(max-width:560px){
  .character-scene{display:grid;grid-template-columns:1fr 1fr;align-items:end;min-height:0;padding:34px 18px 22px;overflow:hidden}
  .character-scene:before,.character-scene:after{display:none}
  .peach-orbit{top:31%;width:62%;opacity:.75}
  .character-scene .pilfer-figure{position:relative;left:auto;right:auto;bottom:auto;height:auto;transform:none;object-fit:contain}
  .character-scene .pilfer-confident{grid-column:1/-1;grid-row:1;width:46%;justify-self:center;z-index:3;margin-bottom:-10px}
  .character-scene .pilfer-hiding{grid-column:1;grid-row:2;width:96%;justify-self:start;z-index:2}
  .character-scene .pilfer-running{grid-column:2;grid-row:2;width:96%;justify-self:end;z-index:2}
  .character-scene .scene-caption{position:relative;grid-column:1/-1;grid-row:3;left:auto;bottom:auto;padding-top:17px;text-align:center}
}

/* PILFER CASE STUDY - EDITORIAL STORYBOARD PASS */
.case-media{aspect-ratio:8/5}
.storyboard-chapter,.dream-chapter{isolation:isolate}
.board-sequence{position:relative;z-index:2;border-top:1px solid var(--line)}
.board-beat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.8vw,46px);row-gap:30px;padding:56px 0 76px;border-bottom:1px solid var(--line)}
.board-beat-copy{grid-column:1/4;grid-row:1/3;align-self:start;padding-top:4px;max-width:260px}
.board-beat-copy>span{display:block;margin-bottom:16px;color:var(--peach);font:500 9px "Archivo Narrow";letter-spacing:.22em}
.board-beat-copy h3{margin:0 0 14px;font:500 clamp(27px,2.7vw,44px)/.92 "Archivo Narrow";letter-spacing:.03em}
.board-beat-copy p{margin:0;color:#888883;font-size:12px;line-height:1.65}
.board-panel{min-width:0;margin:0}
.board-panel-primary{grid-column:4/13}
.board-pair{grid-column:4/13;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,36px);align-items:start}
.board-image{position:relative;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#e8e7e2;border:1px solid #44433f}
.board-image img{width:100%;height:100%;object-fit:contain;filter:grayscale(.06) contrast(1.025)}
.board-image:after{content:"";position:absolute;inset:7px;border:1px solid rgba(10,10,10,.12);pointer-events:none}
.board-number{position:absolute;left:10px;top:10px;min-width:34px;padding:8px 8px 7px;background:rgba(7,7,7,.92);color:#fff;text-align:center;font:500 10px "Archivo Narrow";letter-spacing:.15em}
.board-panel figcaption{display:flex;align-items:center;min-height:43px;padding:12px 0 10px;border-bottom:1px solid #2e2e2c;color:#b7b7b2;font:500 10px "Archivo Narrow";letter-spacing:.18em}
.board-beat-reverse .board-beat-copy{grid-column:10/13}
.board-beat-reverse .board-panel-primary,.board-beat-reverse>.board-pair{grid-column:1/9}
.board-beat-final{padding-bottom:42px}
.board-beat-final .board-beat-copy{grid-row:1}
.board-beat-final>.board-pair{grid-row:1;align-self:start}
.chapter-character-mobile{display:none}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame video{display:block;object-fit:contain;background:#050505}
.product-film{position:relative;background:radial-gradient(circle at 72% 45%,rgba(239,110,52,.12),transparent 38%),linear-gradient(180deg,#0d0a08,#070707 74%);overflow:hidden}
.product-heading{margin-bottom:52px}
.product-copy>p:first-child{margin:6px 0 28px;max-width:500px;color:#aaa;font-size:14px;line-height:1.7}
.partner-credit{margin:0;color:#ecece7;font:500 10px "Archivo Narrow";letter-spacing:.16em;line-height:1.5}
.partner-credit span{display:block;margin-bottom:7px;color:var(--peach);font-size:8px;letter-spacing:.22em}
.video-frame-local{border:1px solid #302b28;box-shadow:0 35px 90px rgba(0,0,0,.35)}
.product-process{display:grid;grid-template-columns:max-content 1fr max-content 1fr max-content;align-items:center;gap:20px;margin-top:24px;color:#8d8d88;font:500 9px "Archivo Narrow";letter-spacing:.17em}
.product-process i{display:block;height:1px;background:#34322f}

@media(max-width:900px){
  .board-beat{grid-template-columns:repeat(6,minmax(0,1fr));padding:46px 0 62px}
  .board-beat-copy,.board-beat-reverse .board-beat-copy{grid-column:1/3;grid-row:1/3;padding-right:8px}
  .board-panel-primary,.board-beat-reverse .board-panel-primary{grid-column:3/7}
  .board-pair,.board-beat-reverse>.board-pair{grid-column:3/7}
  .board-beat-final .board-beat-copy{grid-row:1}
  .board-beat-final>.board-pair{grid-row:1}
  .product-process{grid-template-columns:1fr;gap:11px}
  .product-process i{display:none}
}

@media(max-width:700px){
  .case-media{aspect-ratio:8/5}
  .board-beat,.board-beat-reverse{display:grid;grid-template-columns:1fr;gap:26px;padding:38px 0 48px}
  .board-beat-copy,.board-beat-reverse .board-beat-copy,.board-panel-primary,.board-beat-reverse .board-panel-primary,.board-pair,.board-beat-reverse>.board-pair,.board-beat-final .board-beat-copy,.board-beat-final>.board-pair{grid-column:1;grid-row:auto;max-width:none}
  .board-beat-copy{padding:0 0 2px}
  .board-beat-copy h3{font-size:34px}
  .board-beat-copy p{max-width:480px;font-size:13px}
  .board-pair{grid-template-columns:1fr;gap:26px}
  .board-panel figcaption{min-height:38px;padding-top:10px}
  .board-image:after{inset:5px}
  .chapter-character-mobile{display:grid;grid-template-columns:minmax(110px,42%) 1fr;align-items:end;gap:22px;margin:38px 0 0;padding:22px 22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(circle at 28% 52%,rgba(239,110,52,.12),transparent 42%)}
  .chapter-character-mobile img{width:100%;height:auto;max-height:250px;object-fit:contain;object-position:center bottom}
  .chapter-character-mobile figcaption{align-self:center;margin:0;color:#777772;font:500 9px "Archivo Narrow";letter-spacing:.18em;line-height:1.5}
  .product-copy>p:first-child{font-size:13px}
}

@media(max-width:560px){
  .case-media{margin:0 var(--pad);aspect-ratio:8/5}
  .character-scene{padding:30px 14px 20px}
  .character-scene .pilfer-confident{width:54%;margin-bottom:4px}
  .character-scene .pilfer-hiding{width:100%}
  .character-scene .pilfer-running{width:100%}
  .product-film{padding-bottom:68px}
  .product-heading h2{font-size:13vw}
  .video-frame-local{margin-left:calc(var(--pad) * -1);width:calc(100% + (var(--pad) * 2))}
  .product-process{margin-top:20px;font-size:8px;line-height:1.5}
}

@media(max-width:420px){
  .topbar{height:auto;min-height:126px;flex-wrap:wrap;align-content:center;gap:8px;padding-top:15px;padding-bottom:8px}
  .topbar .brand{width:100%}
  .topbar nav{width:100%;justify-content:space-between;gap:8px;border-top:1px solid #1d1d1d;padding-top:3px}
  .topbar nav a{min-height:40px;display:flex;align-items:center;padding-bottom:0}
  .chapter-character-mobile{grid-template-columns:44% 1fr;padding-left:12px;padding-right:12px}
}

@media(max-width:560px){
  .character-scene{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:520px;padding:28px 18px 22px}
  .character-scene .pilfer-hiding,.character-scene .pilfer-running{display:none}
  .character-scene .pilfer-confident{display:block;position:relative;left:auto;right:auto;bottom:auto;width:auto;height:clamp(340px,105vw,455px);max-width:82vw;margin:0;transform:none;object-fit:contain;z-index:3}
  .character-scene .peach-orbit{top:47%;width:76%;opacity:.8}
  .character-scene .scene-caption{position:relative;left:auto;bottom:auto;margin:8px 0 0;padding:0;text-align:center}
}