:root{--paper:#f8f5ed;--surface:#fffdf8;--ink:#11120f;--muted:#6d6c64;--line:#c9c7be;--pink:#e93025;--pink-light:#fae5de;color-scheme:light}body{background:var(--paper);color:var(--ink)}.midnight-header{height:100px;margin:0 4%;padding:0;border-bottom:1px solid #8f9188}.midnight-brand{display:flex;align-items:center;gap:23px;font-size:22px;font-weight:850;letter-spacing:-1px;line-height:.94}.midnight-brand img{width:38px;height:46px}.midnight-brand small{border-left:1px solid #a4a59c;padding-left:22px;font-size:9px;line-height:1.6;letter-spacing:1.2px;font-weight:400;color:#595b54}.midnight-header nav a{color:#171813;font-size:11px;text-transform:uppercase}.midnight-header nav a.active,.midnight-header nav span{color:var(--pink)}.midnight-header nav{gap:30px}.midnight-header nav span{width:auto}.play-hero{position:relative;max-width:1600px;margin:auto;height:710px;isolation:isolate}.play-hero-copy{position:relative;text-align:center;padding-top:65px;z-index:2;width:52%;margin:auto;pointer-events:none}.play-hero-copy a{pointer-events:auto}.cup-signature{height:59px;width:52px;margin:0 auto 18px}.play-hero h1{font-family:Impact,'Arial Narrow','Helvetica Neue',sans-serif;font-stretch:condensed;font-weight:900;font-size:clamp(65px,6.6vw,104px);letter-spacing:-3px;line-height:.96;margin:0 0 30px}.play-hero-copy p{font-size:23px;line-height:1.2;letter-spacing:-.65px;margin:0 0 25px}.play-hero-copy small{display:block;margin:23px 0;font:13px Georgia,serif}.hero-cta{display:inline-flex;gap:30px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ink);font-size:12px}.hero-cta span{color:var(--pink)}.hero-art{position:absolute;z-index:1}.hero-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 13px #2a201914)}.hero-art span{position:absolute;font-size:11px;color:#dc2017;font-weight:600;letter-spacing:1px;white-space:nowrap}.print-art{width:29%;height:420px;left:0;top:14px;transform:rotate(-8deg)}.print-art span{top:20px;left:22px;transform:rotate(8deg)}.brand-art{width:31%;height:330px;left:4%;bottom:-4px;transform:rotate(5deg)}.brand-art span{left:0;bottom:80px;transform:rotate(-5deg)}.digital-art{width:29%;height:520px;right:0;top:100px;transform:rotate(8deg)}.digital-art span{bottom:28px;right:24px;transform:rotate(-8deg)}.play-selected{margin:0 4%;border-top:1px solid #8f9188;padding-top:22px}.play-section-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 22px}.play-section-heading h2{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--pink);font-weight:500;margin:0}.play-section-heading>a{font-size:11px}.play-work-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 18px}.play-work-grid>.project-card{grid-column:span 2!important}.play-work-grid>.project-card:nth-child(4),.play-work-grid>.project-card:nth-child(5){grid-column:span 3!important}.play-work-grid>.project-card:nth-child(6){grid-column:span 6!important;display:grid;grid-template-columns:2fr 1fr;align-items:center;gap:35px;background:#eeece4}.play-work-grid .project-visual,.play-work-grid .project-visual:has(.scene-rendered){aspect-ratio:1.05;height:auto}.play-work-grid .project-card:nth-child(4) .project-visual,.play-work-grid .project-card:nth-child(5) .project-visual{aspect-ratio:1.55}.play-work-grid .project-card:nth-child(6) .project-visual{aspect-ratio:1.5}.play-work-grid .art-scene{height:100%;aspect-ratio:auto}.play-work-grid .card-copy{padding:0 8px}.play-work-grid .card-copy:before{display:none}.play-work-grid .card-meta{margin:15px 0 7px}.editorial-card .client{color:var(--ink)}.play-work-grid .category-tag{display:none}.play-work-grid .project-title{font-size:18px;letter-spacing:-.4px}.play-work-grid .card-subline{color:var(--muted);font-size:11px}.play-work-grid .project-card:nth-child(6) .project-title{font-size:38px}.play-close{display:flex;align-items:center;justify-content:space-between;margin:55px 4% 0;border-top:1px solid #8f9188;padding:40px 0}.play-close h2{font-size:clamp(30px,4vw,58px);line-height:1;letter-spacing:-2px;margin:0}.play-close a{font-size:12px;border-bottom:1px solid var(--ink);padding:12px 0}.fresh-stamp{border:1.5px solid var(--pink);border-radius:50%;color:var(--pink);font-size:13px;padding:20px 23px;text-align:center;transform:rotate(-12deg);line-height:1.5}.client-marquee{background:transparent;border-top:1px solid var(--line);padding:25px 0 35px}.client-marquee-heading{color:var(--muted)}.client-marquee-heading button{color:var(--muted)}.client-marquee-name{color:#171813;font-size:30px}.main-footer{color:var(--muted);border-color:var(--line);font-size:9px}.page-heading h1{font-weight:800;letter-spacing:-3px}.button{background:var(--ink);color:white;border-color:var(--ink)}.button:hover{background:var(--pink)}.button.secondary{color:var(--ink);border-color:var(--line)}.filter.active{color:var(--pink)!important}.layout-toggle button.active{background:#eadfd4;color:var(--pink)}.client-tile,.profile-story,.capability,.contact-panel,.case-study,.project-dialog,.profile-dialog{background:var(--paper);color:var(--ink);border-color:var(--line)}.case-study .modal-topbar,.expanded-toolbar{background:#eeece4;color:var(--ink)}.case-stage-tools button.active{background:var(--ink);color:#fff}.case-next{background:#eeece4}.mockup-note{color:var(--muted)}.profile-dialog input,.profile-dialog textarea,select option{background:white;color:var(--ink)}.profile-brand{background:#eee8dc}.big-monogram{color:var(--pink)}.profile-brand small{color:var(--muted)}.about-process article{border-color:var(--line)}.about-process article>span{color:var(--pink)}.artwork-dialog{background:var(--paper);color:var(--ink)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.hero-art{transition:transform .6s}.print-art:hover{transform:rotate(-4deg) translateY(-7px)}.brand-art:hover{transform:rotate(0) translateY(-7px)}.digital-art:hover{transform:rotate(4deg) translateY(-7px)}}
@media(max-width:1000px){.midnight-brand small{display:none}.play-hero{height:620px}.play-hero-copy{padding-top:60px}.play-hero h1{font-size:70px}.play-hero-copy p{font-size:20px}.print-art{height:330px}.digital-art{height:410px;top:105px}.brand-art{height:270px}.play-work-grid .project-title{font-size:16px}}
@media(max-width:650px){.midnight-header{height:82px;margin:0 5%;gap:12px}.midnight-brand{font-size:15px;letter-spacing:-.6px;max-width:none;gap:10px;line-height:1}.midnight-brand img{width:28px;height:34px}.midnight-header nav{gap:14px}.midnight-header nav a{font-size:9px}.midnight-header nav span{display:none}.play-hero{height:760px}.play-hero-copy{padding-top:30px;width:100%}.cup-signature{height:42px;width:38px;margin-bottom:14px}.play-hero h1{font-size:64px;letter-spacing:-2.8px;margin-bottom:17px}.play-hero-copy p{font-size:18px}.play-hero-copy small{font-size:11px;margin:16px 0}.print-art{width:42%;height:265px;top:auto;bottom:34px;left:0}.brand-art{width:37%;height:185px;left:30%;bottom:0;z-index:2}.digital-art{width:40%;height:280px;right:0;top:auto;bottom:35px}.hero-art span{font-size:9px}.print-art span{top:3px}.digital-art span{bottom:9px;right:10px}.brand-art span{bottom:0;left:15px}.play-selected{margin:0 5%;padding-top:20px}.play-work-grid{grid-template-columns:1fr 1fr;gap:25px 12px}.play-work-grid>.project-card,.play-work-grid>.project-card:nth-child(4),.play-work-grid>.project-card:nth-child(5){grid-column:span 1!important}.play-work-grid>.project-card:first-child,.play-work-grid>.project-card:nth-child(6){grid-column:span 2!important}.play-work-grid>.project-card:nth-child(6){display:block;padding-bottom:20px}.play-work-grid .project-visual,.play-work-grid .project-card:nth-child(4) .project-visual,.play-work-grid .project-card:nth-child(5) .project-visual{aspect-ratio:1.15}.play-work-grid .card-copy{padding:0}.play-work-grid .project-card:nth-child(6) .card-copy{padding:0 18px}.play-work-grid .project-card:nth-child(6) .project-title{font-size:27px}.play-work-grid .card-meta .client{font-size:9px;min-height:0}.play-work-grid .project-title{font-size:16px}.play-work-grid .card-subline{font-size:10px}.play-close{margin:35px 5% 0;padding:28px 0;flex-wrap:wrap;gap:25px}.fresh-stamp{font-size:10px;padding:16px}.play-close h2{font-size:34px}.play-close a{margin-left:auto}.main-footer{flex-wrap:wrap;gap:15px}.project-grid:not(.list)>.project-card{grid-column:1/-1!important}}
.play-hero{overflow:clip}.hero-cta{background:transparent;color:var(--ink);border-radius:0}.print-art span{left:45px}.digital-art span{right:45px}@media(max-width:650px){.print-art span{left:28px}.digital-art span{right:20px}}

/* Open, geometric headline with a calmer weight. */
.play-hero h1{font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;font-stretch:normal;font-weight:600;font-size:clamp(48px,5.15vw,82px);line-height:1.08;letter-spacing:-.055em}
@media(max-width:1000px) and (min-width:651px){.play-hero h1{font-size:clamp(38px,5.15vw,52px)}}
@media(max-width:650px){.play-hero h1{font-size:clamp(34px,8.7vw,55px);line-height:1.1;letter-spacing:-.05em}}

/* State the design offer before the brand metaphor. */
.midnight-brand .brand-descriptor{display:block;font-size:10px;letter-spacing:1px;line-height:1.5}
.hero-discipline{display:block;color:var(--pink);font-size:11px;letter-spacing:2px;font-weight:600;margin:20px 0 30px}
.play-hero h1{font-size:clamp(40px,4.25vw,68px)}
.play-hero-copy .hero-introduction{font-size:18px;line-height:1.55;letter-spacing:-.25px;max-width:370px;margin:24px auto}
@media(max-width:1000px) and (min-width:651px){.midnight-brand .brand-descriptor{font-size:8px;padding-left:12px}.play-hero h1{font-size:4.2vw}.play-hero-copy .hero-introduction{font-size:16px;max-width:290px}}
@media(max-width:650px){.midnight-header{height:100px}.midnight-brand{position:relative;padding-bottom:23px}.midnight-brand .brand-descriptor{position:absolute;bottom:0;left:0;border:0;padding:0;font-size:6.8px;letter-spacing:.35px;white-space:nowrap}.brand-descriptor br{display:none}.brand-descriptor br:after{content:' '}.hero-discipline{font-size:9px;letter-spacing:1.8px;margin:14px 0 23px}.play-hero h1{font-size:clamp(30px,7.3vw,47px);letter-spacing:-.05em}.play-hero-copy .hero-introduction{font-size:16px;max-width:290px;padding:0 8px}}
/* Keep service annotations outside the object artwork at every breakpoint. */
.hero-art span{z-index:3;background:var(--paper);padding:5px 8px;line-height:1.4}
.digital-art span{bottom:-48px;right:38px;transform:rotate(-8deg);white-space:nowrap}
@media(max-width:1000px) and (min-width:651px){.digital-art span{bottom:-48px;right:26px}}
@media(max-width:650px){.digital-art{bottom:54px}.digital-art span{bottom:-48px;right:18px;transform:rotate(-8deg);font-size:9px}.brand-art span{bottom:0}.print-art span{top:-10px}}

/* Captions flow with their images; no independently positioned arrows. */
.hero-art{display:flex;flex-direction:column;align-items:center;gap:12px;transform:none}
.hero-art img{flex:1;min-height:0;height:0;width:100%;object-fit:contain}
.hero-art span{position:static;inset:auto;transform:none;display:block;flex:none;background:transparent;padding:0;font-size:10px;font-weight:500;letter-spacing:1.6px;line-height:1.5;white-space:nowrap;color:#bd3028}
.print-art{left:1%;top:20px}.brand-art{left:3%;bottom:20px}.digital-art{right:1%;top:100px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.print-art:hover,.brand-art:hover,.digital-art:hover{transform:translateY(-5px)}}
@media(max-width:1000px) and (min-width:651px){.hero-art span{position:static;inset:auto;transform:none}}
@media(max-width:650px){.hero-art{gap:10px}.hero-art span{position:static;inset:auto;transform:none;font-size:9px;letter-spacing:1px}.print-art{left:0;top:auto;bottom:45px}.brand-art{left:30%;bottom:10px}.digital-art{right:0;top:auto;bottom:45px}}

/* Form & Colour: a stable editorial split with one composed image. */
.play-hero{display:grid;grid-template-columns:minmax(0, .95fr) minmax(0,1.15fr);align-items:center;gap:3%;height:auto;max-width:none;margin:0 4%;padding:42px 0 44px;overflow:visible}
.play-hero-copy{width:auto;margin:0;padding:15px 0;text-align:left;pointer-events:auto;min-width:0}
.play-hero h1{font-size:clamp(32px,3.7vw,64px);line-height:1.08;margin:0;letter-spacing:-.055em}
.play-hero-copy .hero-introduction{max-width:460px;margin:25px 0 32px;padding:0;font-size:clamp(15px,1.4vw,20px);line-height:1.5}
.hero-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 28px;gap:14px}
.hero-services>div+div{border-left:1px solid var(--line);padding-left:14px}
.hero-services strong{display:block;color:#d62c20;font-size:clamp(12px,1.4vw,19px);font-weight:600;margin-bottom:8px}
.hero-services span{display:block;font-size:clamp(10px,.9vw,13px);line-height:1.5}
.hero-composition{margin:0;min-width:0}.hero-composition img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.play-hero-copy small{font-size:11px;color:var(--muted);margin:20px 0 0}
@media(max-width:850px){.play-hero{grid-template-columns:1fr;padding-top:34px;gap:28px}.play-hero-copy{max-width:600px;padding:0}.play-hero h1{font-size:clamp(36px,6vw,52px)}.play-hero-copy .hero-introduction{font-size:17px;max-width:490px;margin:20px 0 26px}.hero-services{max-width:510px}.hero-services strong{font-size:15px}.hero-services span{font-size:12px}.hero-composition{width:100%}}
@media(max-width:650px){.play-hero{margin:0 5%;padding:30px 0;gap:25px}.play-hero h1{font-size:clamp(31px,8vw,48px)}.play-hero-copy .hero-introduction{font-size:16px}.hero-services{gap:9px;margin-bottom:22px}.hero-services>div+div{padding-left:9px}.hero-services strong{font-size:13px}.hero-services span{font-size:10px}}

/* Typographic Poster — oversized type, graphic colour and an editorial grid. */
.poster-hero{position:relative;display:grid;grid-template-columns:62% 38%;isolation:isolate;border-bottom:1px solid #8f9188;margin:0 4%;overflow:hidden}
.poster-type{position:relative;padding:25px 0 28px;z-index:2;align-self:start;pointer-events:none}
.poster-type h1{font-family:Impact,"Arial Narrow","Helvetica Neue",sans-serif;font-weight:900;font-stretch:condensed;font-size:clamp(90px,13.4vw,230px);line-height:.87;letter-spacing:-.045em;margin:0;color:#10110e}
.poster-type h1 span{display:block;white-space:nowrap}.poster-type h1 span:first-child{font-size:1.2em;margin-bottom:10px}
.poster-type>p{font-size:clamp(17px,2vw,30px);letter-spacing:-.04em;margin:22px 0 0;line-height:1.15}
.poster-services{position:absolute;top:30px;right:4%;padding:10px 18px;border-left:1px solid #99998d;border-right:1px solid #99998d;font-size:clamp(13px,1.7vw,26px);line-height:1.7;font-weight:750;letter-spacing:-.03em}
.poster-art{position:relative;grid-column:2;grid-row:1/3;background:#0647b9;min-height:560px;z-index:1;overflow:hidden}
.poster-orbit{position:absolute;top:5%;left:8%;width:87%;aspect-ratio:1;border-radius:50%;background:#ff6511}
.poster-art img{position:absolute;object-fit:contain;filter:drop-shadow(0 15px 12px #001b3e40)}
.poster-book{width:85%;height:70%;top:0;left:-10%;transform:rotate(-9deg)}
.poster-brand{width:66%;height:40%;bottom:-1%;left:-8%;transform:rotate(6deg)}
.poster-device{width:64%;height:68%;right:-8%;bottom:-6%;transform:rotate(9deg)}
.poster-info{grid-column:1;display:grid;grid-template-columns:2fr 1fr 1.3fr 1fr;border-top:1px solid #8f9188;align-self:end;z-index:3;background:var(--paper)}
.poster-info>*{margin:0;padding:20px 14px;font-size:9px;line-height:1.6}.poster-info>*+*{border-left:1px solid #8f9188}.poster-info p{padding-left:0;font-size:11px}.poster-info>span,.poster-info>a{letter-spacing:1px}.poster-info>a{color:var(--ink);display:flex;align-items:center}.poster-info>a:hover{background:#ff6511}
.poster-hero+.play-selected{border-top:0;padding-top:25px}.poster-hero+.play-selected h2{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
@media(min-width:1600px){.poster-art{min-height:740px}}
@media(max-width:1000px){.poster-art{min-height:440px}.poster-info{grid-template-columns:1.8fr 1fr 1.2fr}.poster-info>span:nth-child(3){display:none}.poster-services{right:2%;padding:5px 10px}.poster-info>*{padding:15px 9px}}
@media(max-width:650px){.poster-hero{margin:0 5%;grid-template-columns:1fr}.poster-type{padding:25px 0}.poster-type h1{font-size:20vw;letter-spacing:-.04em}.poster-type h1 span:first-child{font-size:1.2em}.poster-type>p{font-size:19px;max-width:290px;margin-top:18px}.poster-services{font-size:14px;top:23px;right:2%;padding:0 10px;line-height:1.5}.poster-art{grid-column:1;grid-row:2;min-height:360px}.poster-orbit{width:75%;left:18%;top:4%}.poster-book{height:85%;width:68%;left:-5%;top:-5%}.poster-device{width:52%;height:90%;right:0;bottom:-8%}.poster-brand{width:52%;height:48%;bottom:-7%;left:0}.poster-info{grid-row:3;grid-template-columns:1.8fr 1fr}.poster-info>span{display:none}.poster-info p{font-size:10px}.poster-hero+.play-selected h2{font-size:16px}}

/* Designer's Worktable: tactile collage with live editorial typography. */
.worktable-hero{position:relative;isolation:isolate;min-height:620px;height:48vw;max-height:850px;overflow:hidden;background:#f3eee4;margin:0 4%}
.worktable-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.worktable-copy{position:relative;padding:4% 3%;width:46%;height:100%;display:flex;align-items:flex-start;flex-direction:column}
.worktable-copy h1{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:950;font-size:clamp(65px,8.3vw,140px);line-height:.85;letter-spacing:-.08em;margin:0 0 18px}
.worktable-strip{font:italic clamp(28px,3.6vw,60px)/1.1 Georgia,serif;white-space:nowrap;background:#faf6e9;padding:10px 14px;margin:0 0 20px -10px;transform:rotate(-2deg);box-shadow:1px 3px 5px #453b2420;position:relative}
.worktable-strip:after{content:"";position:absolute;width:42%;height:2px;background:#e93025;bottom:5px;right:14px;transform:rotate(-2deg)}
.worktable-note{font:italic 18px/1.3 Georgia,serif;color:#696258;margin:8px 0 16px;transform:rotate(-5deg)}
.worktable-link{font-size:12px;border-bottom:1px solid #a99b89;padding:9px 0}.worktable-services{margin-top:auto;padding-top:24px;font-size:11px;letter-spacing:2px;display:flex;gap:18px;align-items:center}.worktable-services:before{content:"";width:35px;height:1px;background:#6a655b}.worktable-services i{font-style:normal;color:#c43125}
.worktable-stamp{position:absolute;left:39%;top:5%;border:1px solid #e93025;border-radius:50%;padding:15px 22px;color:#d52e22;transform:rotate(8deg);font:italic 17px/1.1 Georgia,serif;text-align:center}
.worktable-hero+.play-selected{margin-top:25px}
@media(max-width:1000px){.worktable-hero{min-height:540px}.worktable-copy{width:48%}.worktable-stamp{left:39%;top:3%;font-size:13px;padding:10px 15px}.worktable-copy h1{font-size:9vw}.worktable-services{gap:10px;font-size:9px;letter-spacing:1px}}
@media(max-width:650px){.worktable-hero{margin:0 5%;height:auto;min-height:0;padding-bottom:0;display:flex;flex-direction:column;background:#f4efe5}.worktable-copy{width:100%;height:auto;padding:27px 18px 24px;order:0}.worktable-copy h1{font-size:21vw}.worktable-strip{font-size:9vw;margin-top:4px}.worktable-note{font-size:15px;margin:4px 0 12px}.worktable-services{margin-top:15px;padding-top:0;font-size:10px;gap:15px}.worktable-scene{position:relative;order:1;z-index:0;width:180%;max-width:none;height:320px;object-fit:cover;align-self:flex-end}.worktable-stamp{left:auto;right:15px;top:35px;font-size:14px;padding:13px 16px}.worktable-hero+.play-selected{margin-top:24px}}
.worktable-services{background:#faf6e9;padding:12px 14px;box-shadow:0 2px 4px #453b2410}.worktable-link{background:#faf6e9;padding:9px 12px}.worktable-stamp{background:#faf6e9e8;left:37%;top:4%}
@media(max-width:650px){.worktable-stamp{left:auto;right:12px;top:30px}.worktable-services{padding:10px 0;box-shadow:none;background:transparent}}
@media(max-width:650px){.worktable-copy h1{font-size:18vw}.worktable-stamp{top:260px;right:24px}.worktable-strip{font-size:8.1vw}}