html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.topbar,.mobile-menu{font-family:Inter,Arial,Helvetica,sans-serif}
.rgr-stage.film-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.778fr);gap:0 24px;aspect-ratio:auto;background:transparent;margin-inline:var(--gutter);overflow:visible}.rgr-stage.film-stage>video{aspect-ratio:4/5;height:auto;object-fit:contain;background:#101010}.rgr-overview{align-self:center;aspect-ratio:16/9}.rgr-overview img{object-fit:contain}.rgr-stage .rgr-film-controls{position:static;grid-column:1/-1;border-bottom:1px solid var(--line);padding:20px 0}.rgr-stage .rgr-film-controls .fine{margin-left:auto}.rgr-stage .rgr-film-controls .film-play{border:0;background:none;padding:0;backdrop-filter:none}.rgr-overview .view-label{opacity:1;transform:none}
.rgr-film-controls{position:absolute;inset:auto var(--gutter) 30px;display:flex;align-items:center;gap:24px}.rgr-film-controls .film-play{position:static}.film-gallery-link{margin-left:auto;font-size:13px;padding:16px 20px;background:#0a0a0ad9;border-bottom:1px solid var(--accent)}.film-gallery-link span{display:block;color:var(--accent);font-size:10px;margin-top:7px}.film-gallery-link img[hidden]{display:none}.rgr-film-controls .preview-toggle{background:#0a0a0ad9}.case-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0 0 48px}.case-notes section{border-top:1px solid var(--line);padding-top:24px}.case-notes h3{font-size:24px;line-height:1.2;margin:20px 0 16px}.case-notes section>p:last-child{font-size:14px;line-height:1.7;color:var(--muted);max-width:380px}
@media(max-width:700px){.rgr-stage{aspect-ratio:1}.rgr-stage video{object-fit:contain;align-self:start}.rgr-film-controls{inset:auto 16px 16px;gap:12px;flex-wrap:wrap}.rgr-film-controls .film-play{flex:1;padding:10px;font-size:12px}.rgr-film-controls .film-play small{font-size:9px}.film-gallery-link{order:3;width:100%;padding:10px 0;background:none;display:flex;justify-content:space-between;font-size:12px}.film-gallery-link span{margin:0}.case-notes{grid-template-columns:1fr;gap:28px;margin-bottom:28px}.case-notes h3{font-size:23px;margin:14px 0 12px}}
.page-progress{position:fixed;inset:0 0 auto;height:2px;z-index:201;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.mobile-menu nav a:hover,.mobile-menu nav a:focus-visible{color:var(--accent)}
.amarula-edit{border-top:1px solid var(--line);padding-bottom:35px}.amarula-lead{width:min(100% - 80px,1440px);margin-inline:auto;aspect-ratio:3/2}.amarula-lead img{object-fit:contain}.amarula-gallery-label{position:absolute;inset:auto 0 0;display:flex;align-items:end;justify-content:space-between;gap:20px;padding:70px 28px 24px;background:linear-gradient(transparent,#000b);font-size:11px}.amarula-gallery-label strong{font-size:16px;font-weight:500}.amarula-gallery-label strong span{display:block;margin-top:8px;font-size:11px;color:var(--accent)}.amarula-edit .text-links{flex-wrap:wrap;gap:20px}.amarula-edit .chapter-heading h2{font-size:60px}
.viewer[open]{grid-template-rows:auto minmax(0,1fr) auto auto}.viewer-media{overflow:hidden}.viewer-media img,.viewer-media video{max-height:100%;min-height:0}.viewer-thumbs{display:flex;gap:10px;overflow-x:auto;padding:6px 2px;min-height:68px;max-width:100%;overscroll-behavior:contain}.viewer-thumbs[hidden]{display:none}.viewer-thumbs button{width:88px;height:56px;flex:0 0 88px;padding:0;border:1px solid transparent;background:#151515;opacity:.55}.viewer-thumbs button[aria-current=true]{border-color:var(--accent);opacity:1}.viewer-thumbs button:hover{opacity:1}.viewer-thumbs img{width:100%;height:100%;object-fit:cover}.viewer-bar p{line-height:1.5}.viewer-count{color:var(--accent);white-space:nowrap}
@media(max-width:700px){.scroll-top{right:16px;bottom:16px;width:48px;height:48px}.amarula-edit .environment-pair a:last-child{margin-top:0}.amarula-edit>.wide-image{aspect-ratio:3/2}.viewer-thumbs button{width:68px;height:46px;flex-basis:68px}.viewer-thumbs{min-height:58px}.viewer-original{font-size:10px}.viewer-bar p{max-width:calc(100% - 64px)}}
@media(max-width:1000px){.topbar{grid-template-columns:minmax(270px,1.45fr) repeat(3,minmax(85px,1fr))}.topbar .brand,.desktop-nav a{font-size:16px}}
@media(max-width:700px){.topbar{padding:16px 20px;min-height:68px;align-items:center}.topbar .brand{font-size:13px}.amarula-edit .chapter-heading h2{font-size:38px}.amarula-lead{width:100%;aspect-ratio:3/2;overflow:visible;margin-bottom:64px}.amarula-gallery-label{inset:100% 20px auto;padding:16px 0;background:none;align-items:center}.amarula-gallery-label>span{max-width:130px;line-height:1.5}.amarula-gallery-label strong{font-size:13px}.amarula-gallery-label strong span{font-size:10px;margin-top:4px}.amarula-edit .project-story{padding-bottom:15px}}
@media(max-width:700px){.rgr-stage.film-stage{grid-template-columns:1fr;gap:16px}.rgr-stage.film-stage>video{max-height:65svh;aspect-ratio:4/5}.rgr-overview{grid-row:3}.rgr-stage .rgr-film-controls{grid-row:2;padding:0 0 16px;flex-wrap:nowrap}.rgr-stage .rgr-film-controls .fine{display:none}.rgr-stage .rgr-film-controls .film-play{flex:1}.chapter-heading>p br{display:initial}}

/* The film stays unobscured; playback controls sit beneath the frame. */
.remy-stage.film-stage{aspect-ratio:auto;background:var(--bg);overflow:visible}
.remy-stage>video{aspect-ratio:16/9;height:auto;object-fit:contain}
.film-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 var(--gutter);padding:22px 0;border-bottom:1px solid var(--line)}
.film-toolbar .film-play{position:static;padding:0;border:0;background:none;backdrop-filter:none;font-size:16px}
.film-toolbar .film-play small{margin-top:5px}
.film-toolbar .play-symbol{width:44px;height:44px;border-color:var(--line)}
.film-toolbar .film-play:hover .play-symbol{border-color:var(--accent)}

/* A four-view case study, not four repeated page sections. */
.amarula-study{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(260px,1fr);gap:56px;align-items:start}
.amarula-study .amarula-lead{width:100%;margin:0;aspect-ratio:3/2;overflow:hidden;background:#111}
.amarula-study .amarula-lead img{object-fit:contain}
.study-expand{position:absolute;right:16px;bottom:16px;width:40px;height:40px;display:grid;place-items:center;background:#0a0a0abf;border:1px solid #ffffff40;border-radius:50%}
.study-expand svg{width:16px;height:16px}
.study-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.study-selector button{position:relative;aspect-ratio:2/1;background:#111;border:0;border-bottom:2px solid transparent;padding:0;overflow:hidden;opacity:.55;transition:opacity .25s,border-color .25s}
.study-selector button[aria-pressed=true]{opacity:1;border-color:var(--accent)}
.study-selector button:hover{opacity:1}
.study-selector button img{height:100%;object-fit:cover}
.study-selector button span{position:absolute;left:8px;bottom:6px;font-size:10px;padding:3px 5px;background:#0a0a0ad9}
.study-copy{padding-top:8px;max-width:380px}
.study-caption{margin-top:54px;min-height:245px}
.study-number{font-size:11px;color:var(--muted)}
.study-caption h3{font-size:36px;line-height:1.15;margin:18px 0 22px}
.study-caption p{font-size:15px;line-height:1.7;color:var(--muted)}
.study-scope{font-size:12px;line-height:1.8;padding-top:24px;margin:28px 0;border-top:1px solid var(--line);color:var(--muted)}
.amarula-edit{padding-bottom:35px;border-top:1px solid var(--line)}
.contact-bottom{align-items:center;margin:45px 0 90px}
.contact-bottom h2{font-size:44px;line-height:1.1}
.contact-bottom p{font-size:14px;line-height:1.8;max-width:460px}
.contact-address>.eyebrow{display:block;margin-bottom:22px}
.contact-email{font-size:26px;align-items:center;gap:16px}
.contact-email svg{width:28px;height:28px;flex-shrink:0;transition:transform .25s}
.contact-email:hover svg{transform:translate(3px,-3px)}
.reach-out{margin-top:48px;margin-bottom:48px}
.reach-out span{font-weight:500}
@media(min-width:1001px){.chapter-heading,.work-index,.intro,.project-story,.environment-pair,.johnnie-grid,.decks,.contact,.amarula-study{padding-left:max(var(--gutter),64px);padding-right:max(var(--gutter),64px)}}
@media(max-width:1100px){.amarula-study{gap:28px;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr)}.study-caption{margin-top:30px}.study-caption h3{font-size:30px}.contact-email{font-size:22px}}
@media(max-width:700px){.amarula-study{grid-template-columns:1fr;gap:28px}.study-copy{display:block;max-width:none;padding:0}.study-caption{margin-top:22px;min-height:0}.study-caption h3{font-size:30px;margin:14px 0 16px}.study-caption p{font-size:14px}.study-scope{margin:22px 0;line-height:1.7}.study-selector{gap:8px;margin-top:10px}.amarula-edit{padding-bottom:55px}.film-toolbar{padding:16px 0;gap:16px}.film-toolbar .film-play{font-size:14px;gap:12px}.film-toolbar .film-play small{font-size:9px}.contact-bottom{margin:30px 0 64px}.contact-bottom h2{font-size:36px}.contact-email{font-size:18px}.contact-bottom p br{display:none}.contact-address>.eyebrow{margin-bottom:15px}}
.viewer-thumbs .film-thumb{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--accent);font-size:11px}
.film-thumb svg{width:18px;height:18px}
.johnnie-links{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start}
.current-project{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:124px;margin-bottom:0;padding:28px 0;border-top:1px solid var(--accent);color:var(--ink);font-size:13px;line-height:1.4;letter-spacing:0}
.current-project-name{display:grid;gap:10px;min-width:0}
.current-project-name small{font-size:11px;text-transform:uppercase;color:var(--accent)}
.current-project-name strong{font-size:32px;line-height:1.15;font-weight:500}
.current-project-action{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--ink);border-bottom:1px solid var(--accent);padding:4px 0;transition:color .25s}
.current-project:hover .current-project-action{color:var(--accent)}
.current-project-action svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.current-project:hover .current-project-action svg{transform:translate(2px,-2px)}
.current-project:focus-visible{outline:2px solid #fff;outline-offset:-5px}
@media(max-width:700px){.current-project{gap:16px;font-size:12px;min-height:116px;padding:24px 0}.current-project-name{gap:8px}.current-project-name small{font-size:10px}.current-project-name strong{font-size:24px}}