/* The supplied PDF's original transparent sticker, with live marker strokes. */
@font-face{font-family:'Avallon Alt';src:url('/fonts/Avallon-Alt.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
body[data-view="intro-view"] .site-footer nav{display:none}
body:not([data-gallery="true"]){background:#fff url('/assets/paper.png') center / cover fixed}
body:not([data-gallery="true"]) .site-header{inset:0 7.15% auto;height:100px;border:0;background:transparent}
body:not([data-gallery="true"]) .wordmark{font-size:24px;letter-spacing:-.05em}
body:not([data-gallery="true"]) .review-label{display:none}
body[data-view="contact-view"] .site-footer{display:none}
body[data-view="contact-view"]{padding-top:100px;padding-bottom:0}
.name-form{width:min(680px,100%)}
.sticker,.small-sticker{aspect-ratio:618/451;background:transparent url('/assets/sticker-transparent.png') center / contain no-repeat;border:0;box-shadow:none;border-radius:0}
.sticker .sticker-top,.small-sticker .sticker-top{display:block;top:13.4%;left:8%;width:78%;transform:rotate(.65deg)}
.sticker .hello,.small-sticker .hello{font-family:Inter,var(--font);font-size:12.2cqw;font-weight:900;line-height:.88;letter-spacing:-.025em}
.sticker .my-name,.small-sticker .my-name{font-family:Inter,var(--font);font-size:5.45cqw;font-weight:750;line-height:1.05;letter-spacing:-.035em}
/* Show the supplied PNG's printed lettering, preserving its actual letterforms. */
.intro .sticker .sticker-original-print{top:10.2%;left:30.1%;width:39.2%;height:23.4%;transform:none;pointer-events:none}
.sticker-original-print svg{display:block;width:100%;height:100%;overflow:hidden}
.sticker-bottom{display:none}
.sticker .sticker-space,.small-sticker .sticker-space{top:44%;left:9%;width:76%;height:28%;transform:rotate(.65deg);padding:0}
.name-entry{position:relative;width:100%;height:100%}
.sticker-space input{position:absolute;inset:0;z-index:2;width:100%;height:100%;color:transparent!important;caret-color:transparent;text-transform:uppercase;background:transparent}
.sticker-space input::selection{background:#0002;color:transparent}
.marker-ink,.written-name,.small-sticker .written-name{position:relative;display:block;width:100%;height:100%;padding:0;pointer-events:none;overflow:visible}
.marker-ink{position:absolute;inset:0;z-index:1}
.marker-drawing{display:block;width:100%;height:100%;overflow:visible}
.marker-letter{font-family:'Avallon Alt',sans-serif;font-size:120px;font-weight:400;fill:#111}
.name-prompt{pointer-events:none;font-size:12cqw}
.name-caret{background:#111;height:.9em}
.sticker-space input:not(:placeholder-shown)~.name-prompt{display:none}
.instruction{margin-top:-20px}
.contact{position:relative;display:block;width:min(100%,1440px);max-width:1440px;min-height:710px;margin:0 auto;padding:20px 6.6% 40px}
.contact .contact-body{position:static;width:100%}
.contact .eyebrow,.contact .eyebrow[data-long-name="true"]{font-family:Inter,var(--font);font-size:clamp(48px,6.1vw,88px);font-weight:700;letter-spacing:-.025em;line-height:1.12;margin:0 0 0;color:#000;max-width:62%;overflow-wrap:anywhere}
.contact .eyebrow[data-long-name="true"]{font-size:clamp(30px,3.9vw,56px)}
.contact h1{font-family:Inter,var(--font);font-size:clamp(90px,11.44vw,165px);font-weight:750;line-height:.8;letter-spacing:-.02em;margin:0 0 47px;color:#000;max-width:80%}
.contact h1 span{display:block;white-space:nowrap}
.contact .your-sticker{position:absolute;top:59px;right:4.7%;width:33%;max-width:475px;display:block;padding:0;text-align:center}
.contact .small-sticker{width:100%;max-width:none;min-width:0;margin:0}
.contact .quiet-button{margin-top:-25px;position:relative;font-size:13px;min-height:32px}
.contact #contact-form{width:400px;max-width:100%;margin-left:11px}
.contact .intent-group{margin:0;border:0;padding:0}
.contact .intent-options{gap:8px 24px;margin:0;flex-wrap:nowrap}
.contact .intent-choice{font-size:17px;font-weight:500;gap:9px;min-height:40px;white-space:nowrap}
.contact .intent-choice input{width:18px;height:18px;flex-basis:18px;accent-color:#111}
.contact .field{margin-top:14px}
.contact .field input{font-size:17px;line-height:1.3;padding:6px 0 2px;border-bottom:1px solid #111}
.contact .field input::placeholder{color:#aaa}
.contact .note-field{display:block;margin-top:14px;border:1px solid #111;color:#111;font-size:14px}
.contact .note-field summary{min-height:44px;padding:12px;cursor:pointer}
.contact .note-field[open] summary{border-bottom:1px solid #ccc}
.contact .note-field summary:focus-visible{outline:2px solid #111;outline-offset:4px}
.contact .note-field .field{margin:0}
.contact .note-field .field-error:not(:empty){padding:0 12px 12px}
.contact .note-field textarea{width:100%;min-height:110px;padding:12px;border:0;font:inherit;font-size:16px;line-height:1.4;resize:vertical}
.contact .contact-body :is(h1,.eyebrow,label,legend,summary,.field-help,.field-error,.delivery-note,.preview-note){text-transform:lowercase}
.contact .form-bottom{display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:center;gap:7px;margin-top:12px;flex-wrap:nowrap}
.contact .solid-button{background:#ee190c;font-weight:400;font-size:12px;border-radius:4px;min-height:34px;padding:8px 12px;gap:14px}
.contact .delivery-note{font-size:14px;line-height:1.1;color:#111;max-width:240px;text-align:right}
.contact .skip-work{position:absolute;right:5.6%;bottom:42px;display:flex;align-items:center;width:auto;min-height:44px;font-size:29px;font-weight:700;line-height:1;letter-spacing:-.04em;gap:24px;margin:0;padding:6px 0;border:0;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:10px;color:#000}
.contact .skip-work span{font-size:39px;text-decoration:none}
.film-play-mark{display:none!important}
#film-close,#film-close:focus{outline:none;border:0;box-shadow:none;-webkit-tap-highlight-color:transparent}
#film-close:focus-visible{outline:2px solid #000;outline-offset:3px}
.gallery-page .work-media,.gallery-page .work-media:hover,.gallery-page .work-media:focus,.gallery-page .work-media:focus-visible{border-color:#111!important}
.gallery-page .work-media::after{display:none!important;border:0!important}
.gallery-page .work-media:focus-visible{outline:2px solid #000;outline-offset:2px}
.gallery-page .work-item[data-client-target] .work-media{border-color:#000!important;box-shadow:0 0 0 2px #000!important}
.playback-control{border:0!important;padding:0;height:36px;background:none;gap:10px}
.disco-label{display:block;font-size:14px;order:0}
.disco-state{display:none}
#playback-toggle{width:42px;height:36px;padding:0}
#playback-toggle::before{inset:7px 0;border-radius:14px;background:#fff;border:1px solid #111}
#playback-toggle>span{width:14px;height:14px;margin-left:5px;background:#000}
#playback-toggle[aria-checked="true"]::before{background:#000;border-color:#000}
#playback-toggle[aria-checked="true"]>span{background:#fff;transform:translateX(18px)}
#playback-toggle:focus-visible{outline:2px solid #000;outline-offset:3px}
.scroll-note .scroll-page:nth-child(2){color:#000}
.scroll-note[data-campaign] .scroll-page:nth-child(2){color:var(--poster-accent,inherit)}
.scroll-note .scroll-rail::after{background:#000}
body[data-disco="true"] .scroll-reel{animation:none}
.gallery-page .scroll-note .scroll-reel{transition:transform 250ms ease-out}
.gallery-page .scroll-note[data-campaign="jackpot"] .work-media{background:#ffdb14;color:#201529}
.gallery-page .scroll-note[data-campaign="microsoft"] .work-media{background:#174be8;color:#fff}
.gallery-page .scroll-note[data-campaign="dove"] .work-media{background:#bce7fc;color:#072670}
.gallery-page .scroll-note[data-campaign="bhm"] .work-media{background:#512bac;color:#f4ed6d}
.scroll-note:not([data-campaign="kane"]) .scroll-page{font-size:clamp(24px,20cqw,44px);font-weight:600;line-height:.98;letter-spacing:-.055em}
.scroll-note:not([data-campaign="kane"]) .scroll-page:nth-child(2){color:inherit;font-weight:850;font-size:clamp(27px,23cqw,53px)}
.scroll-note:not([data-campaign="kane"]) .scroll-rail{background:currentColor;opacity:.5}
.scroll-note:not([data-campaign="kane"]) .scroll-rail::after{background:currentColor}
.client-button[data-client="chanel"] .client-logo img{max-width:155px;height:55px;object-fit:contain}
@media(min-width:1600px){.contact{padding-inline:95px}.contact .your-sticker{right:68px}.contact .skip-work{right:81px}}
@media(min-width:761px) and (max-width:1100px){.contact{min-height:calc(100svh - 100px);padding-top:20px}.contact h1{margin-bottom:35px}.contact .your-sticker{top:40px}.contact .intent-choice{font-size:15px}.contact .skip-work{font-size:24px;bottom:36px}}
@media(max-width:760px){
 body:not([data-gallery="true"]) .site-header{height:76px;inset:0 20px auto}
 body:not([data-gallery="true"]) .wordmark{font-size:20px}
 body[data-view="contact-view"]{padding-top:76px}
 body[data-view="contact-view"] .site-header{position:absolute}
 .intro{padding-inline:0;overflow:hidden}.name-form{width:100%;max-width:none}.instruction{font-size:13px;margin-top:-8px}
 .contact{display:block;min-height:calc(100svh - 76px);width:100%;padding:24px 18px 32px}
 .contact .eyebrow,.contact .eyebrow[data-long-name="true"]{font-size:clamp(30px,8.5vw,56px);max-width:56%;line-height:1.03;margin:0 0 10px}
 .contact .eyebrow[data-long-name="true"]{font-size:clamp(26px,6vw,42px)}
 .contact h1{font-size:17.9vw;line-height:.84;letter-spacing:-.035em;margin:0 0 30px;max-width:100%}
 .contact .your-sticker{top:8px;right:0;width:41%;padding:0}
 .contact .quiet-button{margin-top:-14px;min-height:28px;font-size:12px;padding:3px 8px}
 .contact #contact-form{width:100%;margin:0;max-width:440px}
 .contact .intent-options{gap:4px 15px;flex-wrap:wrap}
 .contact .intent-choice{font-size:14px;gap:6px}
 .contact .intent-choice input{width:17px;height:17px;flex-basis:17px}
 .contact .field{margin-top:15px}
 .contact .solid-button{min-height:40px;font-size:14px}
 .contact .delivery-note{font-size:13px}
 .contact .skip-work{position:static;width:max-content;font-size:25px;margin:36px 0 10px auto;gap:18px}
 .scroll-note .scroll-window{inset:30px 10px 32px}
 .scroll-note:not([data-campaign="kane"]) .scroll-page{font-size:clamp(21px,19cqw,40px)}
 .scroll-note:not([data-campaign="kane"]) .scroll-page:nth-child(2){font-size:clamp(24px,22cqw,48px)}
 .scroll-note .scroll-cue,.scroll-note .work-media>p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.scroll-reel{animation:none!important}}

.preview-note{font-size:12px;color:#777;line-height:1.4;margin:15px 0 0;text-align:right}
.gallery-page .scroll-note[data-campaign] .scroll-page:nth-child(2){color:var(--poster-accent,inherit)}
/* Preserve the existing Kane poster's mobile proportions. */
@media(max-width:760px){
 .scroll-note[data-campaign="kane"] .scroll-window{inset:32px 14px 36px}
 .scroll-note[data-campaign="kane"] .scroll-page{font-size:clamp(28px,12vw,48px)}
 .scroll-note[data-campaign="kane"] .scroll-page:nth-child(2){font-size:clamp(34px,14vw,58px)}
}

/* Project roles share the title's hover/focus reveal. */
.film-card-services{font-size:14px;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip;max-width:95%}
@media(max-width:899px){.film-card-services{font-size:12px;line-height:1.3;white-space:normal;margin-top:5px}}

/* Restore the original colours and sliding copy with compact phone proportions. */
.gallery-page .scroll-note .scroll-page{font-size:clamp(20px,min(20cqw,20cqh),64px);overflow-wrap:anywhere}
.gallery-page .scroll-note .scroll-page:nth-child(2){font-size:clamp(22px,min(23cqw,24cqh),76px)}
.gallery-page .scroll-note .work-media>p{margin:0;line-height:1.15}
.gallery-page .scroll-note .scroll-cue{pointer-events:none}
@media(max-width:899px){
 .gallery-page .scroll-note .scroll-window{inset:26px 18px 30px}
 .gallery-page .scroll-note .scroll-page{font-size:clamp(20px,min(18cqw,18cqh),34px)}
 .gallery-page .scroll-note .scroll-page:nth-child(2){font-size:clamp(23px,min(21cqw,22cqh),40px)}
}