/* Homepage hero, Rejouice style. The words sit on the header's edges (40px at 1920, the same as the logo), set as large
   as the width allows, in one colour plus the mint second line; the lede is one colour and "View our work" is plain
   underlined text like the header's "Get in touch". The film fills the screen edge to edge under the words.
   Film first, like Instrument: the headline on one line, the lede and link in a row under it, then the film. */
.hx { --hx-g: clamp(20px, 2.4vw, 40px); display: block; overflow: visible; overflow-x: clip; background: var(--night); color: var(--paper); }
.hx .hx-words { max-width: none; padding: clamp(96px, 9vw, 150px) var(--hx-g) 0; }
.hx .hx-title { margin: 0; font-weight: 500; line-height: .9; letter-spacing: -0.045em; text-wrap: nowrap; }
.hx .hx-title .line > span { white-space: nowrap; text-wrap: nowrap; }
.hx .hx-title .accent { color: var(--mint); }
.hx .hx-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(28px, 3vw, 52px); }
.hx .hx-lede { margin: 0; font-size: clamp(17px, 1.15vw, 22px); line-height: 1.35; letter-spacing: -0.01em; color: rgba(245, 243, 238, .82); }
.hx .hx-lede span { display: block; }
.hx .hx-link { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 3px; border-bottom: 1px solid currentColor; color: var(--paper); font-size: clamp(16px, 1.05vw, 20px); font-weight: 500; text-decoration: none; transition: opacity .25s; }
.hx .hx-link:hover { opacity: .7; }
.hx .hx-link .arrow { display: inline-block; transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.hx .hx-link:hover .arrow { translate: 0 3px; }

.hx .hx-words { padding-top: clamp(92px, 7vw, 124px); }
.hx .hx-title { font-size: min(6.09vw, 129px); line-height: .95; }
.hx .hx-title .line { display: inline-block; }
.hx .hx-row { margin: clamp(18px, 1.6vw, 28px) 0 clamp(24px, 2.2vw, 40px); }

/* The film, as on rejouice.com: edge to edge and a full screen tall (never taller than 16:10, so a tablet doesn't crop
   it to a sliver). As the page scrolls the words slide off it and the film follows at half the page's speed, so it is
   uncovered rather than pushed up; hero-x.js sets --py. Nothing pins. */
.hx .reel { position: relative; width: 100%; }
.hx .reel-track { position: relative; height: auto; }
.hx .reel-stick { position: relative; height: 100vh; overflow: hidden; display: block; padding: 0; gap: 0; }
.hx .reel .film-frame.reel-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; overflow: hidden; background: #000; box-shadow: none; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hx .reel-frame video { object-fit: cover; }
.hx .reel-frame .media-toggle.labelled { right: 20px; bottom: 20px; z-index: 3; }

/* Wider than a phone, the film is a full screen tall and edge to edge (16:10 at most). Since 2 Nov it moves the way
   Rejouice's does on a laptop (measured there at 1920 x 1080): an even half the page's speed the whole way, with
   nothing pinned, and the next section slides up over it. (Before, it held the screen still for a whole screen of
   scrolling and then ended early with white under it.) */
@media (min-width: 761px) {
  .hx .reel-stick { height: 100svh; }
}
/* Laptops and other screens wider than tall, Rejouice's opening: the words take most of the first screen, the headline
   high with air round it and the lede and View our work set along the foot, and the film already playing in the last
   third under them. (A tablet held upright keeps the words as they were: its film is only 16:10, and the air would be
   most of the screen.) */
@media (min-width: 761px) and (min-aspect-ratio: 5/4) {
  .hx { --hx-peek: clamp(200px, 30svh, 360px); }
  .hx .hx-words { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100svh - var(--hx-peek)); box-sizing: border-box;
    padding: clamp(132px, 11vw, 210px) var(--hx-g) clamp(36px, 3.6vw, 68px); }
  .hx .hx-row { margin: 0; }
}

@media (max-width: 760px) {
  .hx .hx-words { padding: 112px var(--gutter) 0; }
  .hx .hx-title { text-wrap: balance; }
  .hx .hx-title .line > span { white-space: normal; }
  .hx .hx-row { flex-direction: column; align-items: flex-start; gap: 22px; margin: 24px 0 36px; }
  .hx .hx-lede { font-size: 18px; }
  .hx .hx-link { font-size: 17px; }
  .hx .hx-words { padding-top: 104px; }
  .hx .hx-title { font-size: 8.9vw; line-height: 1.02; }
  .hx .hx-title .line > span { white-space: nowrap; }
  .hx .hx-title .line { display: block; }
  .hx .hx-row { margin: 20px 0 28px; }
  /* phones: the 4:5 film edge to edge, uncovered the same way */
  .hx .reel-stick { height: auto; aspect-ratio: 4 / 5; }
  .hx .reel-frame .media-toggle.labelled { right: 14px; bottom: 14px; }
}

/* The full film, played the way Rejouice plays its reel: on black, set in from the edges at 16:9, with a thin
   progress line between a pause and a sound icon inside its foot, and "Close Reel" beside the pointer (on touch and
   for the keyboard it sits above the film's top left). reel.js runs it. */
.reel-dialog { --rm: max(24px, 2.6vw); --rmy: max(64px, 7.4vh); color: #EFECE5; }
.reel-dialog::backdrop { background: #000000; }
.reel-dialog .reel-box { position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(calc(100vw - 2 * var(--rm) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100dvh - 2 * var(--rmy)) * 16 / 9));
  aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.reel-dialog video.reel-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; }
.reel-dialog .reel-ui { left: 4.6%; right: 4.6%; bottom: 7.5%; width: auto; translate: none; gap: 14px; padding: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; opacity: 1; }

.reel-dialog .reel-ui button { width: 44px; height: 44px; margin: -12px; border-radius: 0; color: #EFECE5; background: none; }
.reel-dialog .reel-ui button:hover { background: none; color: #fff; }
.reel-dialog .reel-ui svg { width: 14px; height: 14px; }
.reel-dialog .reel-ui .reel-mute svg { width: 18px; height: 18px; }
.reel-dialog .reel-ui button:focus-visible, .reel-dialog .reel-seek:focus-visible, .reel-dialog .reel-close:focus-visible { outline: 1px solid #EFECE5; outline-offset: 4px; }
/* the line: white for what has played, faint for the rest, no handle; a 24px band to grab it by */
.reel-dialog .reel-seek { height: 24px; margin: 0 14px; }
.reel-dialog .reel-seek::-webkit-slider-runnable-track { height: 2px; border-radius: 0; background: linear-gradient(90deg, #EFECE5 var(--p), rgba(239, 236, 229, .26) var(--p)); }
.reel-dialog .reel-seek::-moz-range-track { height: 2px; border-radius: 0; background: rgba(239, 236, 229, .26); }
.reel-dialog .reel-seek::-moz-range-progress { height: 2px; border-radius: 0; background: #EFECE5; }
.reel-dialog .reel-seek::-webkit-slider-thumb { width: 2px; height: 2px; margin-top: 0; border-radius: 0; background: transparent; }
.reel-dialog .reel-seek::-moz-range-thumb { width: 2px; height: 2px; border-radius: 0; background: transparent; }
/* Close Reel: above the film's top left (touch, keyboard) */
.reel-dialog .reel-close { position: absolute; z-index: 3; left: calc(50% - var(--bw, 0px) / 2); top: calc(50% - var(--bh, 0px) / 2); translate: -10px -100%; bottom: auto; right: auto;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: #EFECE5;
  font: 400 16px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
.reel-dialog .reel-close svg { width: 14px; height: 14px; }
/* with a mouse it rides beside the pointer over the film and the black around it, and a click anywhere there closes */
.reel-dialog.follow, .reel-dialog.follow video.reel-full { cursor: none; }
.reel-dialog.follow .reel-ui { cursor: auto; }
.reel-dialog.follow .reel-close:not(:focus-visible) { position: fixed; left: 0; top: 0; translate: calc(var(--cx, -999px) + 14px) calc(var(--cy, -999px) - 50%); pointer-events: none; transition: opacity .25s; }
.reel-dialog.follow.over-ui .reel-close:not(:focus-visible), .reel-dialog.follow.idle .reel-close:not(:focus-visible) { opacity: 0; }
@media (max-width: 760px) {
  .reel-dialog { --rm: 12px; }
  .reel-dialog .reel-ui { left: 3%; right: 3%; bottom: 4%; gap: 8px; }
  .reel-dialog .reel-close { font-size: 15px; }
}
/* a phone on its side: just room above the film for Close Reel */
@media (max-height: 500px) { .reel-dialog { --rmy: 48px; } .reel-dialog .reel-ui { bottom: 6%; } }

/* The opening, the Rejouice way (1 Nov): the tagline sits top left where the logo goes, our name is drawn huge from
   gutter to gutter (an SVG, one path per letter, cut from Bricolage Grotesque 600 like the header's name), and the
   headline, the lede and View our work sit small along the foot, with the film just showing under them. When the big
   name scrolls under the header, the header's logo comes back (hero-x.js drops html.hx-top). */
.hx { --hx-peek: clamp(72px, 10svh, 120px); }
.hx .hx-words { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box;
  min-height: calc(100svh - var(--hx-peek)); padding: clamp(76px, 5.5vw, 104px) var(--hx-g) clamp(28px, 2.6vw, 48px); }
.hx .hx-mark { display: block; width: 100%; height: auto; fill: var(--paper); overflow: visible; }
.hx .hx-mark path { transform-box: fill-box; }
.js .hx .hx-mark path { opacity: 0; translate: 0 18%; animation: hx-letter 1.1s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
/* each letter's place in the word, set here because the site's security rules block style attributes in the page */
.hx .hx-mark path:nth-child(1) { --i: 0; }
.hx .hx-mark path:nth-child(2) { --i: 1; }
.hx .hx-mark path:nth-child(3) { --i: 2; }
.hx .hx-mark path:nth-child(4) { --i: 3; }
.hx .hx-mark path:nth-child(5) { --i: 4; }
.hx .hx-mark path:nth-child(6) { --i: 5; }
.hx .hx-mark path:nth-child(7) { --i: 6; }
.hx .hx-mark path:nth-child(8) { --i: 7; }
.hx .hx-mark path:nth-child(9) { --i: 8; }
@keyframes hx-letter { to { opacity: 1; translate: 0 0; } }
.hx .hx-foot { display: grid; grid-template-columns: auto auto 1fr; align-items: end; column-gap: clamp(40px, 5vw, 96px); }
:root .dark-site .hx .hx-foot .hx-title { font-size: clamp(17px, 1.05vw, 20px); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; text-wrap: nowrap; }
.hx .hx-foot .hx-title .line { display: block; }
.hx .hx-foot .hx-title .accent { color: var(--paper); }
/* the lede's size comes from quiet.css (17 to 20px, set !important); the headline matches it */
:root .dark-site .hx .hx-foot .hx-lede { margin: 0; color: var(--paper); }
.hx .hx-foot .hx-link { justify-self: end; border-bottom: 0; padding: 0; gap: 0; }
.hx .hx-foot .hx-link-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hx .hx-foot .hx-link .arrow { font-size: clamp(18px, 1.3vw, 24px); }

/* the header's tagline: in the logo's place while the big name is on screen */
:root body .nav .brand { position: relative; }
:root body .nav .brand .nav-tag { position: absolute; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none;
  font-family: var(--font); font-size: 16px; font-weight: 400; letter-spacing: -0.01em; opacity: 0; transition: opacity .35s; }
:root body .nav .brand > svg, :root body .nav .brand > span:not(.nav-tag) { transition: opacity .35s; }
html.hx-top body .nav .brand > svg, html.hx-top body .nav .brand > span:not(.nav-tag) { opacity: 0; }
html.hx-top body .nav .brand .nav-tag { opacity: 1; }

@media (max-width: 760px) {
  .hx { --hx-peek: 84px; }
  .hx .hx-words { padding: 76px var(--gutter) 24px; }
  .hx .hx-foot { grid-template-columns: 1fr auto; row-gap: 14px; }
  :root .dark-site .hx .hx-foot .hx-title { grid-column: 1 / -1; font-size: 17px; line-height: 1.3; }
  :root .dark-site .hx .hx-foot .hx-title .line > span.accent { white-space: nowrap; }
  .hx .hx-foot .hx-lede span { display: inline; }
  :root body .nav .brand .nav-tag { font-size: 15px; }
}

/* Hero film v6 (1 Nov): moving film grain laid over the loop, so the video file stays small. A 192 px tile of
   light and dark specks jumps to a new spot 12 times a second, like grain changing frame to frame. */
.hx .reel-frame::after { content: ""; position: absolute; inset: -192px; z-index: 2; pointer-events: none;
  background: url("video/reel/grain.webp?v=20261104-g1") repeat; background-size: 160px 160px; opacity: .16; animation: hx-grain 1s steps(12) infinite; }
@keyframes hx-grain {
  0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-61px, 37px, 0); } 33% { transform: translate3d(83px, -29px, 0); }
  50% { transform: translate3d(-17px, -97px, 0); } 67% { transform: translate3d(113px, 71px, 0); } 83% { transform: translate3d(-131px, 9px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Phones, the Rejouice way (2 Nov, Alex: "can we have our own version of this"): the foot is two short columns side by
   side, two lines each, at one size and colour with Rejouice's tight leading (about 1.15), and the arrow on the last
   line at the right. The full subline is too long for half a phone, so phones show a short one ("From first call /
   to final invoice.", Alex's pick B); laptops keep the full one. The size eases down on narrow phones so both columns fit. */
.hx .hx-lede .hx-short { display: none !important; }
@media (max-width: 760px) {
  .hx .hx-lede .hx-long { display: none !important; }
  .hx .hx-lede .hx-short { display: block !important; }
  .hx .hx-foot { grid-template-columns: auto auto 1fr; row-gap: 0; column-gap: clamp(18px, 7vw, 32px); }
  :root .dark-site .hx .hx-foot .hx-title { grid-column: auto; }
  :root .dark-site .hx .hx-foot :is(.hx-title, .hx-lede, .hx-lede span) { font-size: clamp(14.5px, 3.75vw, 16.5px) !important; font-weight: 400; line-height: 1.15 !important; letter-spacing: -0.01em !important; color: var(--paper); }
  :root .dark-site .hx .hx-foot .hx-title .line > span { letter-spacing: inherit; }
  .hx .hx-foot .hx-lede .hx-short > span { display: block; white-space: nowrap; letter-spacing: inherit; }
  .hx .hx-foot .hx-link { align-self: end; }
  .hx .hx-foot .hx-link .arrow { font-size: 20px; line-height: 1.15; font-weight: 400; }
}

/* Phones, the Rejouice way (2 Nov, Alex: the film is longer on Rejouice): the film is a whole screen tall, as
   rejouice.com's is on a phone (440 x 800 there; ours was a 4:5 band, 440 x 550). It plays its own 9:16 cut
   (hero-9x16-v, each shot framed on its subject, the phone shot easing from the clock to the missed-call text). Like
   Rejouice's it moves at an even half the page's speed the whole way (hero-x.js), with nothing pinned: a pin that held
   it still for a screen made the scroll feel like it stuck and then let go. */
@media (max-width: 760px) {
  .hx .reel-stick { aspect-ratio: auto; height: 100vh; height: 100lvh; }
  /* no round pause button over the film on phones (it stays for the keyboard), and never Safari's own big play button
     when Low Power Mode stops the film playing on its own: the still shows instead, with Play reel over it */
  .hx .reel-frame .media-toggle.labelled:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; }
  /* Play reel: our version of Rejouice's Showreel, a word set big and underlined on the film, light, which opens the film
     with sound */
  .hx .reel-frame .reel-open .reel-cursor { display: block; left: 50%; top: 56%; width: max-content; height: auto; margin: 0; padding: 0 0 6px; border-radius: 0; translate: -50% -50%; scale: 1;
    background: none; color: #F5F3EE; border-bottom: 1.5px solid currentColor; white-space: nowrap;
    font: 340 clamp(48px, 15vw, 72px)/1 "Ukason Sans", "Bricolage Grotesque", system-ui, sans-serif !important; letter-spacing: -0.035em; text-shadow: 0 0 30px rgba(0, 0, 0, .18); }
  .hx .reel-frame .reel-open .reel-cursor::after { content: " reel"; white-space: pre; }
  /* when the full film ends or is closed, the page hands focus back to Play reel, and iPhone Safari then showed the
     keyboard focus style: a teal line round the film and Play reel pushed off centre to the right (Alex 3 Nov 18:39:
     "when the hero reel is finished watching the reel forgets its positioning"). On phones Play reel stays where it
     sits, and its own underline is the focus mark */
  .hx .reel-frame .reel-open:focus-visible { outline: none; }
  .hx .reel-frame .reel-open:focus-visible .reel-cursor { translate: -50% -50% !important; }
}
.hx video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hx video::-webkit-media-controls { display: none !important; }
/* Low Power Mode (hero-x.js): the film can't play by itself, so the still is the frame's own picture and the film, with
   Safari's play button on it, is hidden */
.hx [data-hero-reel].no-auto .reel-frame, [data-hero-reel].no-auto .reel-frame { background-size: cover; background-position: center; background-repeat: no-repeat; }
[data-hero-reel].no-auto .reel-film { visibility: hidden; }

/* The player on phones, the way Rejouice's looks (2 Nov): the whole screen black and the page gone, the film edge to edge
   across the middle, a plain cross top right in place of Close Reel, and a thin row along the foot of the screen (play
   or pause, the line, sound) with no boxes. It fades in rather than flying out of the page's film. */
.reel-dialog { background: #000000; }
.reel-dialog::backdrop { background: transparent; }
@media (max-width: 760px) {
  .reel-dialog { --rm: 0px; height: 100dvh; }
  .reel-dialog .reel-box { overflow: visible; }
  .reel-dialog .reel-ui { left: 16px; right: 16px; bottom: calc((var(--bh, 0px) - 100dvh) / 2 + 56px + env(safe-area-inset-bottom, 0px)); }
  .reel-dialog .reel-close { left: auto; right: max(8px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 14px); translate: none;
    width: 48px; height: 48px; min-height: 0; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .reel-dialog .reel-close svg { width: 22px; height: 22px; }
  .reel-dialog :is(.reel-ui button, .reel-close):focus:not(:focus-visible) { outline: none; }
}
.reel-dialog:focus { outline: none; }

/* once you close the film the page is yours again (as on Rejouice): it scrolls and takes clicks while the film shrinks away */
html:has(.reel-dialog.is-leaving) { overflow: visible; }
.reel-dialog.is-leaving, .reel-dialog.is-leaving::backdrop, .reel-dialog.is-leaving * { pointer-events: none; }
/* the arrow's tap area is 48px tall and wider than the arrow itself, without moving it (Lighthouse: under 24px) */
.hx .hx-foot .hx-link { padding: 10px; margin: -10px; }