main{max-width:1180px}body{overflow-x:clip}
.ema-svc__bleed{width:100vw;margin-inline:calc(50% - 50vw);position:relative}
.ema-svc__wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.ema-svc__sec{border-top:1px solid #ededed}
.ema-svc__sec__in{padding:48px 0 88px}
.ema-svc__head{display:flex;align-items:baseline;gap:20px;margin:0 0 34px}
.ema-svc__head h2{margin:0;font-size:52px;line-height:1.02;letter-spacing:-.02em}
/* The mask a title rises out of has room below the letters for the tails of g, p and y (Shaun, 14 Sep: titles
   "cut off on the bottom"); the negative margin gives that room back so nothing below moves. */
.ema-svc__lines,.ema-svc__rise{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.ema-svc__lines>span,.ema-svc__rise>span{display:block}
.ema-svc__b{min-width:0}.ema-svc__b>p,.ema-svc__b>h3{max-width:760px}.ema-svc__b>p:last-child{margin-bottom:0}
.ema-svc__go{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.ema-svc__pause{font:500 14px/1 Satoshi,Inter,system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.35);border-radius:22px;padding:0 18px;min-height:44px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ema-svc__pause:hover{border-color:#fff}.ema-svc__pause:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* hero */
.ema-svc__hero{margin:0 0 72px}
.ema-svc__hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);gap:64px;align-items:center;padding:12px 0 24px}
.ema-svc__hero__grid--wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.ema-svc__hero h1{margin:0 0 22px;font-size:80px;line-height:.98;letter-spacing:-.03em;max-width:9em}
.ema-svc__hero .lead{max-width:32em;margin:0 0 28px}
.ema-svc__hero__go{margin:0}
.ema-svc__hero__fig{margin:0}.ema-svc__hero__fig figcaption{font-size:13.5px;color:#666;margin-top:10px}
.ema-svc__hero__img{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#1c1c1c}
.ema-svc__hero__img img,.ema-svc__hero__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.ema-svc__hero__img--film{aspect-ratio:16/9}.ema-svc__hero__img--site{aspect-ratio:16/10;background:#f4f4f4}
.ema-svc__hero__img--site a{position:absolute;inset:0;display:block}.ema-svc__hero__img--site a img{object-position:50% 0}

/* What it is: the full-width band */
.ema-svc__sec--band{border:0;min-height:max(600px,min(92vh,980px));display:flex;align-items:flex-end;overflow:hidden;background:#111;color:#fff}
.ema-svc__band__media{position:absolute;inset:-14% 0;will-change:transform}
.ema-svc__band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ema-svc__band__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 38%,rgba(0,0,0,.24) 72%,rgba(0,0,0,.06) 100%)}
.ema-svc__band__say{position:relative;width:100%;padding-block:0 72px}
.ema-svc__sec--band .ema-svc__head h2{color:#fff;font-size:78px;letter-spacing:-.03em}
.ema-svc__sec--band .ema-svc__b p{color:#f1f1f1;font-size:22px;line-height:1.5;max-width:34em}
.ema-svc__sec--band .ema-svc__pause{position:absolute;right:24px;bottom:24px;z-index:2}

/* What you get: the split */
.ema-svc__sec--split{border:0;padding:104px 0 96px}
.ema-svc__split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:72px;align-items:start}
.ema-svc__split__say>p{max-width:34em}
.ema-svc__get{list-style:none;padding:0;margin:26px 0 0;counter-reset:get}
.ema-svc__get li{counter-increment:get;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;padding:17px 0;border-top:1px solid #e6e6e6;margin:0;font-size:18px;line-height:1.45;color:#111}
.ema-svc__get li:last-child{border-bottom:1px solid #e6e6e6}
.ema-svc__get li::before{content:counter(get,decimal-leading-zero);font-size:13px;color:#767676;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ema-svc__split__media{margin:0;position:relative}
.ema-svc__split__frame{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#1c1c1c}
.ema-svc__split__frame img[data-plx]{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;display:block;will-change:transform}
.ema-svc__split__frame--tall{aspect-ratio:9/16;max-width:400px;margin-left:auto}
.ema-svc__split__frame--tall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ema-svc__split__frame--site{aspect-ratio:16/10;background:#f4f4f4;border:1px solid #e6e6e6}
.ema-svc__split__frame--site img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.ema-svc__split__media figcaption{font-size:13.5px;color:#666;margin-top:10px}
.ema-svc__split__media .ema-svc__pause{position:absolute;right:14px;bottom:14px}

/* Results: the dark band */
.ema-svc__sec--dark{border:0;background:#0f0f0f;color:#fff;padding:104px 0 96px}
.ema-svc__sec--dark .ema-svc__head h2{color:#fff}.ema-svc__sec--dark p{color:#c9c9c9}
.ema-svc__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px;margin:40px 0 36px}
/* the figures are sized to their own column, not the window: at 1024px "100,000+" at a fixed size ran past its
   column and pushed the page sideways. 21cqi fits eight characters of Lora in the column at any width. */
.ema-svc__stat{border-top:1px solid #333;padding-top:22px;container-type:inline-size;min-width:0}
.ema-svc__stat strong{display:block;font-family:Lora,Georgia,serif;font-weight:500;font-size:min(96px,21cqi);line-height:.95;letter-spacing:-.03em;margin-bottom:14px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ema-svc__stat span{display:block;font-size:18px;color:#fff}
.ema-svc__stat small{display:block;font-size:14px;color:#8f8f8f;margin-top:6px}
.ema-svc__sec--dark .ema-svc__note{font-size:13.5px;color:#8f8f8f;max-width:760px}

/* clients say */
.ema-svc__quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px 64px}
.ema-svc__quote{margin:0}
.ema-svc__b .ema-svc__quote p{font-family:Lora,Georgia,serif;font-size:36px;line-height:1.2;letter-spacing:-.01em;color:#111;margin:0 0 18px;max-width:none}
.ema-svc__quote footer{font-size:15px;color:#555}

/* our work */
.ema-svc__chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 22px}
.ema-svc__chips[hidden]{display:none}
.ema-svc__chips button{font:500 15px/1 Satoshi,Inter,system-ui,sans-serif;color:#111;background:#fff;border:1px solid #d4d4d4;border-radius:22px;padding:0 18px;min-height:44px;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.ema-svc__chips button:hover{border-color:#111}
.ema-svc__chips button[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.ema-svc__chips button:focus-visible{outline:2px solid #111;outline-offset:2px}
.ema-svc__pset__h{margin:34px 0 14px;font-size:19px;font-weight:600}
.is-filtered .ema-svc__pset__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.ema-svc__prow{display:flex;gap:12px;margin:0 0 12px}
.ema-svc__prow figure{margin:0;min-width:0}
.ema-svc__lb{display:block;border-radius:6px;overflow:hidden;cursor:zoom-in}
.ema-svc__prow img{width:100%;height:auto;display:block;border-radius:0;transition:filter .35s}
.ema-svc__lb:hover img{filter:brightness(1.08)}
.ema-svc__lb:focus-visible{outline:2px solid #111;outline-offset:3px}
.ema-svc__films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:26px 0 12px}
.ema-svc__films--portrait{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
.ema-svc__film{margin:0}.ema-svc__film--lead{grid-column:1/-1}
.ema-svc__film video{width:100%;aspect-ratio:16/9;background:#111;border-radius:8px;display:block;object-fit:cover}
.ema-svc__film--portrait video{aspect-ratio:9/16}
.ema-svc__film figcaption{font-size:14px;color:#666;margin-top:9px}
.ema-svc__sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;margin:12px 0 8px}
.ema-svc__site--lead{grid-column:1/-1}
.ema-svc__site__shot{display:block;border-radius:10px;overflow:hidden;border:1px solid #e6e6e6}
.ema-svc__site__shot img{width:100%;height:auto;display:block;border-radius:0;transition:filter .35s}
.ema-svc__site__shot:hover img{filter:brightness(1.05)}
.ema-svc__site h3{margin:14px 0 2px;font-size:21px;font-weight:600}
.ema-svc__site h3 a{color:#111;text-decoration:none;border-bottom:1px solid #bbb;display:inline-block;padding:9px 0}
.ema-svc__site p{margin:0;font-size:15.5px;color:#444}

/* questions */
.ema-svc__faq{border-bottom:1px solid #e6e6e6;max-width:900px}
.ema-svc__q{border-top:1px solid #e6e6e6}
.ema-svc__q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:14px 0;cursor:pointer}
.ema-svc__q summary::-webkit-details-marker{display:none}
.ema-faq .ema-svc__q summary h3{margin:0;font-size:21px;line-height:1.35;font-weight:500;max-width:none}
.ema-svc__q summary:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ema-svc__q summary:focus-visible{outline:2px solid #111;outline-offset:4px}
.ema-svc__q__i{flex:none;position:relative;width:18px;height:18px}
.ema-svc__q__i::before,.ema-svc__q__i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:#111;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ema-svc__q__i::after{transform:rotate(90deg)}
.ema-svc__q[open] .ema-svc__q__i::after{transform:rotate(0)}
.ema-svc__q__a{padding:0 48px 24px 0}.ema-svc__q__a p{margin:0;max-width:760px}

/* work with us */
.ema-svc__sec--end{border:0;padding-top:24px}
.ema-svc__strip{overflow:hidden;padding:8px 0}
.ema-svc__strip__track{display:flex;gap:14px;width:max-content}
.ema-svc__strip img{height:260px;width:auto;border-radius:8px;display:block}
.ema-svc__strip__ctl{display:flex;justify-content:flex-end;margin:12px 0 0}
.ema-svc__strip__ctl .ema-svc__pause{color:#111;background:#fff;border-color:#d4d4d4;-webkit-backdrop-filter:none;backdrop-filter:none}
.ema-svc__strip__ctl .ema-svc__pause:hover{border-color:#111}
.ema-svc__strip__ctl .ema-svc__pause:focus-visible{outline-color:#111}
.ema-svc__end{padding-top:40px}
.ema-svc__end .ema-svc__head h2{font-size:84px;letter-spacing:-.03em}
.ema-svc__b .ema-svc__end__say{font-size:22px;line-height:1.5;color:#111;max-width:30em}

/* the same components on the other pages (write_motion_pages.py) */
.ema-svc__sec--band a,.ema-svc__sec--band li{color:#f1f1f1}
.ema-svc__sec--dark a,.ema-svc__sec--dark li{color:#e6e6e6}
.ema-svc__hero__say>p{max-width:34em}
.ema-work__site h3 a{display:inline-block;padding:10px 0}
.ema-svc__b .emt{padding:0}.ema-svc__b .emt__in{max-width:none}.ema-svc__b .emt__sub{margin-top:0}
.ema-svc__b .emt__g{justify-content:flex-start;margin:26px 0 0;max-width:none}

/* Buttons: the home page's rolling-label button everywhere (Shaun, 14 September 2026). The main action is filled dark,
   a secondary is the home page's outline; on the dark and photo bands they invert. Hover only rolls the letters, as on
   the home page. The script builds the two rolling rows from the one real label, which stays for assistive technology.
   Contrast: white on #111 18.9:1, #111 on white 18.9:1, and the same pair inverted on the bands. */
.ema-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:10px 20px;border:1px solid #111;border-radius:5px;background:#111;color:#fff;font-family:Satoshi,Inter,system-ui,sans-serif;font-weight:500;font-size:16px;line-height:1.2;letter-spacing:-.02em;text-decoration:none;cursor:pointer;transition:transform .12s ease}
.ema-cta:hover{background:#111;color:#fff}
.ema-cta--quiet,.ema-cta--quiet:hover{background:transparent;color:#111;border-color:#111}
.ema-cta:active{transform:scale(.985)}
.ema-cta:focus-visible{outline:2px solid #111;outline-offset:3px}
.ema-cta__r{display:inline-block;position:relative;overflow:hidden;height:1.2em;line-height:1.2;vertical-align:top;white-space:pre}
.ema-cta__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ema-cta__row{display:block;height:1.2em}
.ema-cta__l{display:inline-block;transition:transform .4s cubic-bezier(.25,.8,.25,1);transition-delay:var(--d,0ms)}
.ema-cta:hover .ema-cta__l,.ema-cta:focus-visible .ema-cta__l{transform:translateY(-100%)}
.ema-svc__sec--dark .ema-cta,.ema-svc__sec--dark .ema-cta:hover,.ema-svc__sec--band .ema-cta,.ema-svc__sec--band .ema-cta:hover{background:#fff;color:#111;border-color:#fff}
.ema-svc__sec--dark .ema-cta--quiet,.ema-svc__sec--dark .ema-cta--quiet:hover,.ema-svc__sec--band .ema-cta--quiet,.ema-svc__sec--band .ema-cta--quiet:hover{background:transparent;color:#fff;border-color:#fff}
.ema-svc__sec--dark .ema-cta:focus-visible,.ema-svc__sec--band .ema-cta:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){.ema-cta,.ema-cta__l{transition:none}.ema-cta:active{transform:none}}

/* the photograph viewer */
.ema-lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(10,10,10,.96);color:#fff}
.ema-lb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
.ema-lb::backdrop{background:rgba(10,10,10,.96)}
.ema-lb__img{max-width:min(92vw,1600px);max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:4px;display:block}
.ema-lb__cap{margin:14px 20px 0;font-size:15px;color:#cfcfcf;text-align:center}
.ema-lb__bar{display:flex;gap:10px;margin-top:14px}
.ema-lb__bar button{font:500 15px/1 Satoshi,Inter,system-ui,sans-serif;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:22px;padding:0 20px;min-height:44px;cursor:pointer}
.ema-lb__bar button:hover{border-color:#fff}.ema-lb__bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
html:has(.ema-lb[open]){overflow:hidden}

/* Motion. Every starting state below is gated twice: on .ema-svc-js, which the head snippet adds and takes away
   again if the script never arrives, and on no-preference for reduced motion. Either missing means the page
   simply shows its finished state. */
@media (prefers-reduced-motion:no-preference){
@keyframes svc-rise{from{transform:translateY(105%)}}
/* The hero is the page's largest paint, so neither move may hide it from the browser (SEO audit, 14 September 2026:
   every page's LCP was 1-3s of "render delay" waiting on these). Chrome does not count text that starts at opacity 0
   until its fade ENDS, nor a picture clipped shut until the clip opens, so the fade starts at .01 (no visible
   difference) and the unmask is a page-coloured cover lifting off a picture that is drawn from the first frame (the
   same wipe to the eye, the frame's own colour included). Measured in Chrome before choosing: the cover counts the
   picture at load at full size; a clip-path starting shut counted it 440ms late. */
@keyframes svc-fade{from{opacity:.01;transform:translateY(22px)}}
@keyframes svc-cover{to{transform:scaleY(0)}}
@keyframes svc-settle{from{transform:scale(1.16)}}
@keyframes svc-strip{to{transform:translateX(-50%)}}
.ema-svc__rise>span{animation:svc-rise 1.1s cubic-bezier(.16,1,.3,1) .05s backwards}
.ema-svc__load{animation:svc-fade 1s cubic-bezier(.16,1,.3,1) var(--d,0s) backwards}
.ema-svc__hero__img::after{content:"";position:absolute;inset:-1px;z-index:2;background:#fff;transform-origin:50% 0;pointer-events:none;animation:svc-cover 1.3s cubic-bezier(.7,0,.2,1) .12s both}
.ema-svc__hero__img>img,.ema-svc__hero__img>video,.ema-svc__hero__img>a>img{animation:svc-settle 2s cubic-bezier(.16,1,.3,1) .12s backwards}
.ema-svc__strip__track{animation:svc-strip 70s linear infinite}
.ema-svc__strip__track.is-paused{animation-play-state:paused}
.ema-svc-js .ema-svc__lines>span{transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.ema-svc-js .ema-svc__sec.is-in .ema-svc__lines>span{transform:none}
.ema-svc-js [data-rv]{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
.ema-svc-js [data-rv].is-in{opacity:1;transform:none}
.ema-svc-js [data-rv="clip"]{opacity:1;transform:none;clip-path:inset(18% 0 0 0 round 12px);transition:clip-path 1.3s cubic-bezier(.16,1,.3,1)}
.ema-svc-js [data-rv="clip"].is-in{clip-path:inset(0 0 0 0 round 12px)}
:root{interpolate-size:allow-keywords}
.ema-svc__q::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.16,1,.3,1),content-visibility .45s allow-discrete}
.ema-svc__q[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.ema-svc__strip{overflow-x:auto}.ema-svc__strip__ctl{display:none}}

@media (max-width:1023px){
.ema-svc__hero h1{font-size:64px}
.ema-svc__sec--band .ema-svc__head h2,.ema-svc__end .ema-svc__head h2{font-size:62px}
.ema-svc__split{gap:48px}
/* justified rows need width; below it the photographs pour into columns instead, so a portrait beside a
   landscape no longer leaves a hole under the shorter one */
.ema-svc__pset{columns:3;column-gap:10px}.ema-svc__pset__h{column-span:all}
.ema-svc__prow{display:contents}.ema-svc__prow figure{break-inside:avoid;margin:0 0 10px}
}
@media (max-width:809px){
.ema-svc__hero{margin:0 0 48px}
.ema-svc__hero__grid,.ema-svc__hero__grid--wide{grid-template-columns:1fr;gap:28px;padding:12px 0 8px}
.ema-svc__hero h1{font-size:46px}
.ema-svc__head{margin-bottom:24px}.ema-svc__head h2{font-size:36px}
.ema-svc__sec__in{padding:34px 0 60px}
.ema-svc__sec--band{min-height:max(520px,82svh)}
/* on a phone the words climb well above the bottom third the desktop shade darkens, so it reaches higher (contrast sweep, 14 Sep) */
.ema-svc__band__shade{background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.54) 80%,rgba(0,0,0,.44) 100%)}
.ema-svc__band__say{padding:0 20px 56px}
.ema-svc__sec--band .ema-svc__head h2,.ema-svc__end .ema-svc__head h2{font-size:44px}
.ema-svc__sec--band .ema-svc__b p{font-size:18.5px}
.ema-svc__sec--band .ema-svc__pause{right:14px;bottom:auto;top:14px}
.ema-svc__sec--split{padding:64px 0 56px}
.ema-svc__split{grid-template-columns:1fr;gap:40px}
.ema-svc__get li{font-size:16.5px;grid-template-columns:36px 1fr}
.ema-svc__split__frame--tall{max-width:320px;margin:0 auto}
.ema-svc__sec--dark{padding:64px 0 56px}
.ema-svc__sec--dark .ema-svc__wrap{padding-inline:20px}
.ema-svc__stats{gap:28px;margin:28px 0}
.ema-svc__b .ema-svc__quote p{font-size:26px}
.ema-svc__pset{columns:2}
.ema-svc__films,.ema-svc__sites{grid-template-columns:1fr}
.ema-svc__films--portrait{grid-template-columns:1fr 1fr}
.ema-faq .ema-svc__q summary h3{font-size:18px}
.ema-svc__q__a{padding-right:0}
.ema-svc__strip img{height:170px}
.ema-svc__b .ema-svc__end__say{font-size:19px}
}