/* ==========================================================================
   One stylesheet for every page.

   Colours, type and spacing are the variables at the top. The accent colour
   is written into this file by the build from site-src/brand.json.

   The look: soft depth. The page is made of rounded sheets and cards that
   sit on top of one another, with real shadow under them. Corners are big,
   greys are warm, and the accent shows up as a glow as well as a solid.

   The motion: layers that slide and windows that open. Every state that
   hides something until it is revealed sits under html.js, which the page's
   first script sets, so with scripts off nothing is ever hidden. Layouts
   that depend on scrolling (pinned stages, the stacked cards, the sideways
   gallery) sit under html.pin, which is only set when motion is welcome.
   ========================================================================== */

@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#fff;
  --cream:#faf6f0;
  --wash:#f3eee6;
  --peach:#ffe6d8;
  --ink:#17161b;
  --ink-2:#4d4b54;
  --ink-3:#6e6c76;
  --line:#e9e3d9;
  --night:#131217;
  --night-2:#1e1c24;
  --accent:#ff4a1c;        /* brand.json: accent */
  --accent-ink:#c93208;    /* brand.json: accent_text, the accent for small text on white */
  --amber:#ffb45e;
  --ok:#14532d;
  --ok-bg:#dcf2e2;
  --warn:#7a4100;
  --warn-bg:#ffe8c4;

  --font:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  --gutter:clamp(16px,4vw,64px);
  --sect:clamp(84px,11.5vw,184px);
  --r-xl:clamp(28px,4vw,56px);
  --r-l:clamp(22px,2.6vw,40px);
  --r-m:clamp(16px,1.6vw,24px);
  --r-s:14px;
  --nav-h:60px;

  /* shadow that reads as height: a tight contact shadow plus a wide soft one */
  --sh-1:0 1px 1px rgba(23,22,27,.04),0 8px 18px -8px rgba(23,22,27,.12);
  --sh-2:0 1px 2px rgba(23,22,27,.05),0 16px 32px -14px rgba(23,22,27,.18),0 44px 72px -44px rgba(23,22,27,.24);
  --sh-3:0 2px 4px rgba(23,22,27,.06),0 26px 50px -20px rgba(46,24,10,.3),0 72px 110px -64px rgba(46,24,10,.36);
  --edge:inset 0 0 0 1px rgba(23,22,27,.06);

  /* easing, after Emil Kowalski: strong ease-out for arrivals, strong
     ease-in-out for things already on screen, the iOS drawer curve for panels */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);

  --z-under:0;
  --z-stage:1;
  --z-content:2;
  --z-menu:40;
  --z-nav:50;
  --z-cursor:80;
  --z-curtain:90;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--ink) transparent;background:var(--paper)}
body{margin:0;color:var(--ink);font:400 1.0625rem/1.55 var(--font);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
button{font:inherit;color:inherit}
em{font-style:normal}
b,strong{font-weight:700}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.plan--pick :focus-visible,.foot :focus-visible,.jscene--night :focus-visible{outline-color:#fff}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:16px}

.wrap{width:min(100% - 2*var(--gutter),1440px);margin-inline:auto}
.wrap--narrow{width:min(100% - 2*var(--gutter),920px);margin-inline:auto}

/* the page is one layer; the footer lies underneath it and is uncovered at the end */
.page{position:relative;z-index:var(--z-content);display:flow-root;background:var(--paper);border-radius:0 0 var(--r-xl) var(--r-xl)}
/* short pages still fill the screen, so the footer stays underneath until the end */
main{min-height:90vh}

/* ------------------------------------------------------------------ type */
.d1{font-size:clamp(2.75rem,min(12.4vw,15.5vh),12rem);line-height:.9;letter-spacing:-.05em;font-weight:700;text-wrap:balance}
.d2{font-size:clamp(2.35rem,7vw,7rem);line-height:.94;letter-spacing:-.045em;font-weight:700;text-wrap:balance}
.d3{font-size:clamp(1.6rem,3vw,2.75rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.kick{display:grid;justify-items:start;font-size:1rem;font-weight:400}
.kick .eyebrow{line-height:1.2;margin-bottom:clamp(14px,2vw,26px)}
.kick .d1,.kick .d2{display:block}
.lede b{color:var(--ink)}
.lede{font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.38;letter-spacing:-.012em;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.small{font-size:.9375rem;line-height:1.5}
.muted{color:var(--ink-3)}
.stop{display:inline-block;color:var(--accent)}
.num{font-variant-numeric:tabular-nums}

/* a small label above a headline */
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--paper);box-shadow:var(--sh-1),var(--edge);font-size:.875rem;font-weight:700;letter-spacing:-.01em;margin-bottom:clamp(18px,2.4vw,30px)}
.eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.sheet--white .eyebrow,.eyebrow--tint{background:var(--cream)}

/* rounded labels */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--wash);color:var(--ink);font-size:.875rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.chip--glass{background:rgba(255,255,255,.82);color:var(--ink);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.chip--dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ------------------------------------------------------------------ buttons and links */
.btn{--bg:var(--ink);--fg:#fff;--chip:var(--accent);--chip-fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:7px 7px 7px 26px;border:0;border-radius:999px;
  background:var(--bg);color:var(--fg);font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  box-shadow:0 14px 28px -14px rgba(23,22,27,.55);transition:transform .16s var(--ease-out)}
.btn>span{display:inline-block}
.btn i{position:relative;flex:none;display:block;width:42px;height:42px;border-radius:50%;background:var(--chip);color:var(--chip-fg);overflow:hidden;font-style:normal;transition:transform .3s var(--ease-out)}
.btn i::before,.btn i::after{content:"\2192";position:absolute;inset:0;display:grid;place-items:center;font-size:1.1rem;font-weight:700;transition:transform .28s var(--ease-out)}
.btn i::after{transform:translate3d(-130%,0,0)}
.btn:active{transform:scale(.97)}
.btn--ghost{--bg:var(--paper);--fg:var(--ink);--chip:var(--ink);--chip-fg:#fff;box-shadow:var(--sh-1),inset 0 0 0 1.5px rgba(23,22,27,.14)}
.btn--onaccent{--bg:var(--ink);--fg:#fff;--chip:#fff;--chip-fg:var(--ink)}
.btn--white{--bg:#fff;--fg:var(--ink);--chip:var(--accent);--chip-fg:var(--ink)}
.btn--sm{min-height:44px;padding:4px 4px 4px 18px;gap:10px;font-size:.9375rem;box-shadow:none}
.btn--sm i{width:36px;height:36px}
.btn--wide{width:100%;justify-content:space-between}
.btn[disabled]{opacity:.55;cursor:default}

.link{display:inline-flex;align-items:baseline;gap:.45em;font-weight:700;text-decoration:none;padding-bottom:5px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:background-size .3s var(--ease-out)}
.link::after{content:"\2192";display:inline-block;transition:transform .3s var(--ease-out)}
/* On a touch screen, links that stand on their own get a taller place to press than the words alone:
   an unseen margin round them, so nothing moves. */
@media (pointer:coarse){
  .link,.textlink,.nav__brand{position:relative}
  .link::before,.textlink::before,.nav__brand::before{content:"";position:absolute;left:-6px;right:-6px;top:-9px;bottom:-9px}
  .nav__brand::before{top:-13px;bottom:-13px}
  .foot__grid ul{gap:0}
  .foot__grid a{display:inline-block;padding:12px 0 13px}
  .foot__h{margin-bottom:4px}
}

@media (hover:hover) and (pointer:fine){
  .btn:hover i{transform:scale(1.07)}
  .btn:hover i::before{transform:translate3d(130%,0,0)}
  .btn:hover i::after{transform:none}
  .link:hover{background-size:0 2px;background-position:100% 100%}
  .link:hover::after{transform:translate3d(5px,0,0)}
}

/* ------------------------------------------------------------------ nav */
.nav{position:fixed;inset:12px 0 auto;z-index:var(--z-nav);display:flex;justify-content:center;padding-inline:12px;pointer-events:none}
.nav__bar{pointer-events:auto;display:flex;align-items:center;gap:6px;width:min(100%,1180px);height:var(--nav-h);padding:0 8px 0 20px;border-radius:999px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);
  box-shadow:0 0 0 1px rgba(23,22,27,.06),0 14px 44px -16px rgba(23,22,27,.28)}
.nav__brand{display:inline-flex;align-items:center;gap:11px;margin-right:auto;font-weight:700;font-size:1.125rem;letter-spacing:-.035em;text-decoration:none;white-space:nowrap}
.nav__brand img{height:26px;width:auto}
/* the logo, drawn into the page: it takes the colour of the words around it, and its square keeps the accent */
/* the logo's shapes run right to the edge of its box, and a browser trims whatever sits on that edge by a fraction of a pixel (it flattened the side of the dot), so nothing is trimmed */
.mark{display:block;width:auto;height:1em;fill:currentColor;overflow:visible}
.mark__dot{fill:var(--accent)}
.nav__brand .mark{height:clamp(21px,1.7vw,25px)}
/* a thin line along the foot of the menu bar that grows as the page is read */
.nav__bar{position:relative}
.nav__read{position:absolute;left:30px;right:30px;bottom:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
/* the dot by the name: it breathes, and the ring round it fills as the page is read */
.rec{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.nav .rec::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p,0)*1turn),rgba(23,22,27,.1) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
.nav__links{position:relative;display:flex;align-items:center;gap:2px}
.nav__links a{position:relative;z-index:1;padding:9px 14px;border-radius:999px;font-size:.9375rem;text-decoration:none;color:var(--ink-2);white-space:nowrap;transition:color .2s ease}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:700}
.nav__hl{position:absolute;z-index:0;left:0;top:50%;height:36px;width:10px;margin-top:-18px;border-radius:999px;background:var(--wash);opacity:0;transition:transform .3s var(--ease-drawer),opacity .2s ease}
.nav__cta{margin-left:6px}
.nav__toggle{display:none;position:relative;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;transition:transform .16s var(--ease-out)}
.nav__toggle:active{transform:scale(.94)}
.nav__toggle span{position:absolute;left:13px;right:13px;top:21px;height:2px;border-radius:2px;background:#fff;transition:transform .4s var(--ease-drawer)}
.nav__toggle span:first-child{transform:translate3d(0,-4px,0)}
.nav__toggle span:last-child{transform:translate3d(0,4px,0)}
.menu-open .nav__toggle span:first-child{transform:rotate(45deg)}
.menu-open .nav__toggle span:last-child{transform:rotate(-45deg)}
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover{color:var(--ink)}
}

/* full-screen menu, small screens: a sheet with a curved lower edge that drops in */
.menu{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:calc(var(--nav-h) + 56px) var(--gutter) max(28px,env(safe-area-inset-bottom));background:var(--cream);overflow-y:auto;
  visibility:hidden;clip-path:ellipse(140% 0% at 50% 0%);transition:clip-path .5s var(--ease-drawer),visibility 0s linear .5s}
.menu-open .menu{visibility:visible;clip-path:ellipse(140% 150% at 50% 0%);transition:clip-path .65s var(--ease-drawer)}
.menu ul{list-style:none;display:grid;gap:2px}
.menu li{overflow:hidden}
.menu li a{display:block;padding-block:.06em;font-size:clamp(2.75rem,14vw,5.5rem);font-weight:700;line-height:1.02;letter-spacing:-.05em;text-decoration:none;
  transform:translate3d(0,110%,0);transition:transform .3s var(--ease-out)}
.menu-open .menu li a{transform:none;transition:transform .7s var(--ease-out) calc(var(--i,0)*50ms + 160ms)}
.menu li a[aria-current="page"]{color:var(--accent-ink)}
.menu li a:focus-visible{outline-offset:-4px;border-radius:14px}
.menu__foot{display:grid;gap:14px;opacity:0;transition:opacity .2s ease}
.menu-open .menu__foot{opacity:1;transition:opacity .5s ease .5s}
.menu__foot p{color:var(--ink-2)}
.menu-open{overflow:hidden}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:block}
  .nav__bar{padding-right:8px}
}
/* scripts off: no toggle to press, so the links wrap under the name instead */
.no-js .nav{position:static;padding-top:12px}
.no-js .nav__bar{height:auto;min-height:var(--nav-h);flex-wrap:wrap;border-radius:26px;padding-block:8px}
.no-js .nav__links{display:flex;flex-wrap:wrap}
.no-js .nav__toggle,.no-js .menu,.no-js .nav__hl{display:none}
.no-js .nav__cta{display:inline-flex}

/* ------------------------------------------------------------------ page-change curtain */
/* Two panels with rounded ends, taller than the screen. They travel upward:
   in from below to cover, then on and out through the top, so the edge that
   sweeps the page is always a curve. */
.curtain{position:fixed;inset:0;z-index:var(--z-curtain);pointer-events:none;visibility:hidden;overflow:hidden}
.curtain i{position:absolute;left:-12vw;right:-12vw;top:-18vh;height:136vh;border-radius:50%/13.3%;transform:translate3d(0,120vh,0)}
.curtain i:nth-child(1){background:var(--accent)}
.curtain i:nth-child(2){background:var(--night)}
.curtain b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5em;color:#fff;font-size:clamp(1.5rem,4vw,3rem);letter-spacing:-.04em;opacity:0}
.curtain .rec{width:.34em;height:.34em}
.curtain .mark{height:clamp(1.75rem,4.8vw,3.4rem)}
/* leaving: both panels rise to cover the page, accent first, ink on its heels */
.is-leaving .curtain{visibility:visible;pointer-events:auto}
.is-leaving .curtain i{transform:none;transition:transform .56s var(--ease-in-out)}
.is-leaving .curtain i:nth-child(2){transition-delay:.08s}
.is-leaving .curtain b{opacity:1;transition:opacity .2s ease .34s}
/* arriving: painted already covering, before the first frame */
.is-entering .curtain{visibility:visible}
.is-entering .curtain i{transform:none}
.is-entering .curtain b{opacity:1}
/* arrived: the panels carry on upward and off */
.is-entered .curtain{visibility:visible}
.is-entered .curtain i{transform:translate3d(0,-122vh,0);transition:transform .85s var(--ease-in-out)}
.is-entered .curtain i:nth-child(1){transition-delay:.1s}
.is-entered .curtain b{opacity:0;transform:translate3d(0,-40px,0);transition:opacity .2s ease,transform .5s var(--ease-in-out)}

/* ------------------------------------------------------------------ the dot that follows the pointer */
.cursor{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;display:none}
.fine .cursor{display:block}
.cursor span{position:absolute;left:-42px;top:-42px;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--ink);
  font-size:.875rem;font-weight:700;letter-spacing:-.01em;transform:scale(.12);opacity:0;transition:transform .32s var(--ease-out),opacity .2s ease,background-color .2s ease}
.cursor.is-on span{opacity:.9}
.cursor.is-link span{transform:scale(.36);opacity:.5}
.cursor.is-label span{transform:scale(1);opacity:1}
.cursor.is-down span{transform:scale(.9)}
.cursor.is-link.is-down span{transform:scale(.28)}

/* ------------------------------------------------------------------ reveals */
/* words that rise from behind their baseline */
.w{display:inline-block;clip-path:inset(-.14em -.1em -.22em)}
.w__i{display:inline-block}
.js [data-split]:not(.is-split){visibility:hidden}
.js [data-split] .w__i{transform:translate3d(0,132%,0) rotate(5deg);transform-origin:0 100%}
.js [data-split].is-in .w__i{transform:none;transition:transform 1.05s var(--ease-out) calc(var(--i,0)*42ms + var(--d,0)*1ms)}
/* the full stop lands a beat after the last word */
.js [data-split] .stop{transform:scale(0);transform-origin:50% 80%}
.js [data-split].is-in .stop{transform:none;transition:transform .5s var(--ease-pop) calc(var(--i,0)*42ms + var(--d,0)*1ms + 520ms)}

/* blocks that settle upward */
.js [data-reveal]{opacity:0;transform:translate3d(0,34px,0)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .7s ease calc(var(--d,0)*1ms),transform .95s var(--ease-out) calc(var(--d,0)*1ms)}

/* small things that pop */
.js [data-reveal="pop"]{opacity:0;transform:scale(.8)}
.js [data-reveal="pop"].is-in{opacity:1;transform:none;transition:opacity .3s ease calc(var(--d,0)*1ms),transform .55s var(--ease-pop) calc(var(--d,0)*1ms)}

/* cards that tip up into place */
.js [data-reveal="tilt"]{opacity:0;transform:perspective(1200px) translate3d(0,60px,0) rotateX(14deg);transform-origin:50% 100%}
.js [data-reveal="tilt"].is-in{opacity:1;transform:perspective(1200px) translate3d(0,0,0) rotateX(0deg);transition:opacity .6s ease calc(var(--d,0)*1ms),transform 1.1s var(--ease-out) calc(var(--d,0)*1ms)}

/* pictures uncovered by a mask that opens */
.js [data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(14% 10% 14% 10% round var(--r-xl))}
.js [data-reveal="mask"]>*{transform:scale(1.18)}
.js [data-reveal="mask"].is-in{clip-path:inset(0 round var(--r-l));transition:clip-path 1.15s var(--ease-out) calc(var(--d,0)*1ms)}
.js [data-reveal="mask"].is-in>*{transform:none;transition:transform 1.5s var(--ease-out) calc(var(--d,0)*1ms)}

/* soft dividers that draw across */
.js [data-reveal="rule"]{opacity:1;transform:none}
.js [data-reveal="rule"]::before{transform:scaleX(0)}
.js [data-reveal="rule"].is-in::before{transform:none;transition:transform 1.1s var(--ease-in-out) calc(var(--d,0)*1ms)}
.js [data-reveal="rule"]>*{opacity:0;transform:translate3d(0,22px,0)}
.js [data-reveal="rule"].is-in>*{opacity:1;transform:none;transition:opacity .7s ease calc(var(--d,0)*1ms + 120ms),transform .9s var(--ease-out) calc(var(--d,0)*1ms + 120ms)}

/* a paragraph that lights up word by word as it is scrolled through */
.say{font-size:clamp(1.5rem,3.5vw,3.5rem);line-height:1.12;letter-spacing:-.035em;font-weight:700;max-width:27ch;text-wrap:pretty}
.say .sw{transition:opacity .35s ease}
.pin .say .sw{opacity:.16}
.pin .say .sw.is-lit{opacity:1}
.say em{color:var(--accent-ink)}

/* ------------------------------------------------------------------ soft light behind things */
.glow{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow i{position:absolute;border-radius:50%;will-change:transform}
/* The glows are bigger than the section they sit in. Without this they stop dead at its bottom edge,
   which shows as a hard line; with it they melt into the page well before they get there. */
.glow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(64%,360px);
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 18%,rgba(255,255,255,.34) 40%,rgba(255,255,255,.66) 62%,rgba(255,255,255,.9) 84%,#fff 100%)}
.glow i:nth-child(1){width:68vmax;height:68vmax;right:-22vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(255,138,92,.34),rgba(255,180,94,.16) 45%,rgba(255,180,94,0) 72%)}
.glow i:nth-child(2){width:54vmax;height:54vmax;left:-24vmax;top:calc(50% - 27vmax);background:radial-gradient(closest-side,rgba(255,214,186,.5),rgba(255,214,186,0) 70%)}
.js .glow i:nth-child(1){animation:float1 19s ease-in-out infinite alternate}
.js .glow i:nth-child(2){animation:float2 23s ease-in-out infinite alternate}
@keyframes float1{to{transform:translate3d(-7vmax,5vmax,0) scale(1.12)}}
@keyframes float2{to{transform:translate3d(8vmax,-4vmax,0) scale(.9)}}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;z-index:var(--z-content);isolation:isolate;padding-top:calc(var(--nav-h) + clamp(34px,7vh,96px))}
.hero__foot{display:grid;grid-template-columns:minmax(0,46ch) auto;justify-content:space-between;align-items:end;gap:26px 48px;margin-top:clamp(24px,4.4vh,52px)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
@media (max-width:820px){.hero__foot{grid-template-columns:1fr}}

/* the round badge that turns */
.badge{--bs:clamp(104px,12vw,168px);position:absolute;z-index:3;right:var(--gutter);bottom:calc(var(--bs)*-1 - clamp(4px,1.6vw,26px));display:grid;place-items:center;width:var(--bs);aspect-ratio:1;border-radius:50%;
  background:var(--paper);color:var(--ink);box-shadow:var(--sh-3);text-decoration:none;transition:transform .5s var(--ease-out)}
.badge svg{position:absolute;inset:7%;width:86%;height:86%;overflow:visible}
.badge text{font-size:15px;font-weight:700;fill:currentColor}
.badge__mid{display:grid;place-items:center;width:38%;aspect-ratio:1;border-radius:50%;background:var(--accent);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.6rem)}
.badge__mid::before{content:"\2193"}
.js .badge svg{animation:spin 26s linear infinite}
.js .badge__mid{animation:nod 2.4s var(--ease-in-out) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nod{50%{transform:translate3d(0,4px,0)}}
.badge:active{transform:scale(.95)}
.no-js .badge,.js:not(.pin) .badge{display:none}

/* inner pages: a headline, a line under it */
.top{position:relative;isolation:isolate;padding-top:calc(var(--nav-h) + clamp(40px,8.5vh,120px));padding-bottom:clamp(40px,6vw,88px)}
.top .lede{margin-top:clamp(20px,3vw,40px)}
.top--tight{padding-bottom:0}

/* ------------------------------------------------------------------ the wall of films
   Five films in a row that is swiped sideways (or dragged with a mouse, or stepped with the arrow
   keys). The one in the middle is the chosen one. Its padding lets the first and the last reach the
   middle; the room under it is for the tiles' shadows, which a row that scrolls would cut off. */
.reel{--tw:clamp(150px,16.5vw,300px);--th:calc(var(--tw)*16/9);--tg:clamp(10px,1.4vw,24px);position:relative;z-index:var(--z-stage);margin-top:clamp(32px,5vw,64px)}
.reel__stage{display:flex;flex-direction:column;gap:var(--tg)}
.reel__row{display:flex;gap:var(--tg);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:calc(var(--th)*.12 + 20px) calc(50% - var(--tw)/2) calc(var(--th)*.12 + 90px);margin-bottom:-70px}
.reel__row::-webkit-scrollbar{display:none}
.reel__row.is-held{scroll-snap-type:none}
.reel__row:focus-visible{outline-offset:-6px}
.no-js .reel__row{padding-inline:var(--gutter)}
.no-js video[data-loop]{display:none}      /* a clip is fetched by the script; without it there is only the still, and a browser would draw an empty player over that */
.tile{position:relative;flex:none;width:var(--tw);aspect-ratio:9/16;margin:0;border-radius:var(--r-l);background:var(--wash);box-shadow:var(--sh-3);scroll-snap-align:center;
  transform:translate3d(0,var(--oy,0),0) rotate(var(--rot,0deg));-webkit-user-select:none;user-select:none}
.tile__in{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit}
.tile img,.tile video,.reel__window img,.reel__window video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.tile figcaption{position:absolute;left:10px;bottom:10px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--ink);font-size:.75rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* without the pinned version (scripts off, or less motion asked for) the chosen one is marked with a ring, and nothing moves */
html:not(.pin) .tile.is-on{box-shadow:var(--sh-3),0 0 0 3px var(--accent)}

/* a word under the wall saying it can be moved: for a finger, or for a mouse */
.reel__hint{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;font-size:.8125rem;font-weight:700;letter-spacing:-.01em;color:var(--ink-3)}
.reel__hint i{width:22px;height:1.5px;border-radius:2px;background:currentColor;opacity:.5}
.reel__hint-mouse,.no-js .reel__hint{display:none}
@media (hover:hover) and (pointer:fine){.reel__hint-touch{display:none}.reel__hint-mouse{display:inline}}

/* the big picture: each film again, large enough to fill the screen. Only the chosen one is there. */
.reel__window{position:relative;order:-1;margin-inline:var(--gutter);aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:var(--night);color:#fff}
.reel__film{position:absolute;inset:0;display:none}
.reel__film.is-on{display:block}
.reel__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 26%,rgba(0,0,0,.1) 42%,rgba(0,0,0,.7))}
.reel__say{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,8vh,96px);display:grid;gap:clamp(12px,1.6vw,22px)}
.reel__say .d2{max-width:17ch}
.reel__sub{max-width:38ch;font-size:clamp(1rem,1.35vw,1.3125rem);line-height:1.4;color:rgba(255,255,255,.88)}
.reel__cap{position:absolute;right:var(--gutter);top:clamp(16px,2vw,28px)}
@media (max-aspect-ratio:4/5){
  .reel{--tw:44vw}
  .reel__window{aspect-ratio:4/5}
}

/* pinned version: scripts on and motion welcome. The wall holds still on the screen while the page
   scrolls: the tile in the middle grows until it fills the screen and the others fly out, the big
   picture of the same film takes over from it, the headline arrives, and then the next sheet
   slides up over it all. While the tile is growing the row stops being something that scrolls
   (is-zoom), because a row that scrolls would cut the tile off at its own edges. */
.pin .reel{height:365vh;margin-top:calc(clamp(28px,4vw,44px) + var(--th)*.09 - (100vh - var(--th))/2)}
.pin .reel__stage{position:sticky;top:0;height:100vh;display:block;overflow:hidden;pointer-events:none}
/* The row is only as tall as its tiles need (a little above for the ones that lean, more below for their shadows), so
   that it does not lie over the buttons under the heading above it. It takes a finger or a mouse itself, not only its
   tiles: on an iPhone a row that ignores touches cannot be swiped, even by a touch on something inside it. */
.pin .reel__row{position:absolute;left:0;right:0;top:calc(50% - var(--th)*.66 - 24px);margin:0;align-items:flex-start;padding-block:calc(var(--th)*.16 + 24px) calc(var(--th)*.16 + 120px);pointer-events:none}
.pin .reel.is-shut .reel__row,.pin .reel.is-shut .tile{pointer-events:auto}
.pin .reel.is-zoom .reel__row{overflow:visible;scroll-snap-type:none}
.pin .tile{will-change:transform;cursor:pointer}
/* the zoomer: a layer the size of the screen with an opening cut in it, through which a copy of the chosen tile's
   picture is seen growing (the script says why it is done this way). It sits over the row and under the big picture. */
.reel__zoom{display:none}
.pin .reel__zoom{display:block;position:absolute;inset:0;visibility:hidden;pointer-events:none;will-change:clip-path}
.pin .reel__zoom canvas{position:absolute;left:50%;top:50%;width:var(--tw);height:var(--th);max-width:none;margin:calc(var(--th)/-2) 0 0 calc(var(--tw)/-2);will-change:transform}
.pin .reel__hint{position:absolute;left:0;right:0;top:calc(50% + var(--th)*.62 + 14px);transition:opacity .3s ease}
.pin .reel:not(.is-shut) .reel__hint{opacity:0}
.pin .reel__window{position:absolute;inset:0;order:0;margin:0;aspect-ratio:auto;border-radius:0;background:none;opacity:0;visibility:hidden;will-change:opacity,transform}
.pin .reel__film{will-change:transform}
.pin .reel__cap{top:calc(var(--nav-h) + 30px)}
.pin .reel__shade,.pin .reel__cap{opacity:0;transition:opacity .5s ease}
.pin .reel.is-open .reel__shade,.pin .reel.is-open .reel__cap{opacity:1}
.pin .reel__sub{opacity:0;transform:translate3d(0,22px,0)}
.pin .reel.is-said .reel__sub{opacity:1;transform:none;transition:opacity .7s ease .55s,transform .9s var(--ease-out) .55s}
@media (max-aspect-ratio:4/5){
  .pin .reel__say{bottom:max(16vh,116px)}
}

/* ------------------------------------------------------------------ sheets and sections */
/* A sheet is a rounded layer that overlaps whatever came before it. */
.sheet{position:relative;z-index:var(--z-content);display:flow-root;background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:calc(var(--r-xl)*-1);box-shadow:0 -24px 60px -34px rgba(23,22,27,.3)}
.sheet--cream{background:var(--cream)}
.sheet--flat{box-shadow:none}
.pin .reel+.sheet{margin-top:-100vh}

.sect{position:relative;padding-block:var(--sect)}
.sect--flush{padding-top:0}
.sect--close{padding-top:clamp(36px,5vw,72px)}
.sect--under{padding-bottom:calc(var(--sect) + var(--r-xl))}
.sect__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34ch);align-items:end;gap:20px 56px;margin-bottom:clamp(36px,6vw,92px)}
.sect__head p{color:var(--ink-2);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.42;text-wrap:pretty}
.sect__head--solo{grid-template-columns:1fr}
.sect__head .eyebrow{grid-column:1/-1;justify-self:start;margin-bottom:0}
@media (max-width:820px){.sect__head{grid-template-columns:1fr}}

/* a white card with height */
.card{border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-2),var(--edge)}

/* ------------------------------------------------------------------ the six jobs: one short film
   Six scenes in a single frame, playing one after another like a video, with the film's own bar
   underneath: pause, and a segment for each scene that fills as it plays and jumps to it when
   pressed. It is an ordinary list of six, so with scripts off the scenes are simply set out side
   by side as cards. */
.jfilm__reel{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,22px)}
.jscene{position:relative;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1),var(--edge);overflow:hidden}
.jscene--peach{background:var(--peach)}
.jscene--wash{background:var(--wash)}
.jscene--night{background:var(--night);color:#fff}
.jscene__art{position:relative;container-type:inline-size;aspect-ratio:16/10;margin:clamp(8px,.9vw,14px) clamp(8px,.9vw,14px) 0;border-radius:calc(var(--r-l) - 8px);overflow:hidden;background:var(--cream);box-shadow:var(--edge)}
.jscene--peach .jscene__art,.jscene--wash .jscene__art{background:var(--paper)}
.jscene--night .jscene__art{background:var(--night-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.jscene__text{display:grid;gap:6px;align-content:start;padding:clamp(16px,1.8vw,28px)}
.jscene__no{font-size:.8125rem;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.jscene__no i{font-style:normal;opacity:.6}
.jscene--night .jscene__no{color:var(--amber)}
.jscene h3{font-size:clamp(1.625rem,2.5vw,2.375rem);line-height:1;letter-spacing:-.045em}
.jscene p{font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.42;color:var(--ink-2);text-wrap:pretty}
.jscene--night p{color:rgba(255,255,255,.76)}
@media (max-width:980px){.jfilm__reel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.jfilm__reel{grid-template-columns:minmax(0,1fr)}}

/* with scripts on: the one frame. Every scene sits in the same place, so the frame is as tall as
   the tallest and never jumps; only the scene that is showing can be seen or pressed. */
.js .jfilm{--pad:clamp(20px,3.4vw,56px);--bar:82px;--on:#fff;position:relative;isolation:isolate;border-radius:var(--r-xl);overflow:hidden;background:var(--paper);color:var(--ink);box-shadow:var(--sh-2),var(--edge)}
.js .jfilm.is-dark{--on:var(--night);color:#fff}
.js .jfilm__reel{grid-template-columns:minmax(0,1fr);gap:0}
.js .jscene{grid-area:1/1;z-index:0;grid-template-rows:none;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(20px,4.4vw,80px);
  padding:var(--pad) var(--pad) calc(var(--pad) + var(--bar));border-radius:0;box-shadow:none;opacity:0;pointer-events:none}
.js .jscene.was-on{z-index:1;opacity:1}
.js .jscene.is-on{z-index:2;opacity:1;pointer-events:auto;transition:opacity .45s ease}
.js .jscene__text{order:1;gap:clamp(10px,1.2vw,18px);padding:0}
.js .jscene__art{order:2;justify-self:end;width:100%;max-width:820px;margin:0;border-radius:var(--r-l);box-shadow:var(--sh-2),var(--edge)}
.js .jscene--night .jscene__art{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.js .jscene__no{font-size:clamp(.875rem,1.1vw,1.0625rem)}
.js .jscene h3{font-size:clamp(2.75rem,7.4vw,6.75rem);line-height:.9;letter-spacing:-.05em}
.js .jscene p{max-width:25ch;font-size:clamp(1.0625rem,1.55vw,1.5rem);line-height:1.34}
/* a scene arrives: the words rise one after another, the picture settles in */
.js .jscene__text>*{opacity:0;transform:translate3d(0,18px,0)}
.js .jscene__art{opacity:0;transform:scale(.965)}
.js .jscene.is-on .jscene__text>*,.js .jscene.is-on .jscene__art{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--ease-out)}
.js .jscene.is-on .jscene__text>:nth-child(1){transition-delay:.06s}
.js .jscene.is-on .jscene__text>:nth-child(2){transition-delay:.12s}
.js .jscene.is-on .jscene__text>:nth-child(3){transition-delay:.18s}
.js .jscene.is-on .jscene__art{transition-delay:.04s}
.js .jscene.was-on .jscene__text>*,.js .jscene.was-on .jscene__art{opacity:1;transform:none}
/* each scene's picture starts from its beginning, like a shot in a film */
.is-reset .g *,.is-reset .g *::before,.is-reset .g *::after,.jfilm__seg.is-reset b i{animation:none!important}

/* the film's bar */
.jfilm__bar{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(16px,2.2vw,30px);display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,24px);transition:color .4s ease}
.jfilm__play{flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;padding:0;background:currentColor;cursor:pointer;transition:transform .16s var(--ease-out),background-color .4s ease}
.jfilm__play:active{transform:scale(.94)}
.jfilm__play svg{width:16px;height:16px;fill:var(--on);transition:fill .4s ease}
.jfilm__play .pl,.jfilm.is-playing .jfilm__play .pa{display:block}
.jfilm__play .pa,.jfilm.is-playing .jfilm__play .pl{display:none}
.jfilm__segs{flex:1;min-width:0;display:flex;gap:clamp(4px,.7vw,10px)}
.jfilm__seg{flex:1 1 0;min-width:0;display:grid;gap:9px;padding:10px 0 4px;border:0;background:none;color:inherit;font:inherit;font-size:.8125rem;font-weight:700;letter-spacing:-.01em;text-align:left;cursor:pointer}
.jfilm__seg span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.5;transition:opacity .2s ease}
.jfilm__seg[aria-current="true"] span{opacity:1}
.jfilm__seg b{position:relative;display:block;height:4px;border-radius:4px;overflow:hidden}
.jfilm__seg b::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.16}
.jfilm__seg b i{position:absolute;inset:0;border-radius:4px;background:currentColor;transform:scaleX(0);transform-origin:0 50%}
.jfilm__seg.is-done b i{transform:none}
.jfilm__seg[aria-current="true"] b i{background:var(--accent);animation:jfill var(--ms,5s) linear forwards;animation-play-state:paused}
.jfilm.is-playing .jfilm__seg[aria-current="true"] b i{animation-play-state:running}
@keyframes jfill{from{transform:scaleX(0)}to{transform:none}}
.jfilm.is-dark :focus-visible{outline-color:#fff}
@media (hover:hover) and (pointer:fine){
  .jfilm__seg:hover span{opacity:1}
  .jfilm__play:hover{transform:scale(1.06)}
  .jfilm__play:active{transform:scale(.94)}
}
/* narrower: the picture on top, the words under it, and the bar's names give way to the bars alone */
@media (max-width:820px){
  .js .jfilm{--pad:14px;--bar:64px}
  .js .jscene{grid-template-columns:minmax(0,1fr);align-content:start;gap:clamp(16px,3.4vw,26px)}
  .js .jscene__art{order:1;max-width:none}
  .js .jscene__text{order:2;padding:0 8px;gap:8px}
  .js .jscene h3{font-size:clamp(2.5rem,11vw,4.25rem)}
  .js .jscene p{max-width:34ch}
  .jfilm__bar{left:22px;right:22px;bottom:12px;align-items:center}
  .jfilm__seg{padding:20px 0}
  .jfilm__seg span{display:none}
}
.jobs__note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(36px,6vw,88px)}
.jobs__note p{max-width:46ch;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.42;color:var(--ink-2)}

/* the pictures in the six-jobs film. Each is a plain, labelled thing: a calendar, a camera's view,
   an editing screen, a week's schedule, a conversation, an advert. Each is drawn finished, and the
   movement is a short build that plays once while its scene is showing, so if a browser makes
   nothing of the animation, what is on screen is still the whole picture.
   Sizes follow the frame: --u is a hundredth of the picture's width. */
.g{position:absolute;inset:0;display:grid;place-items:center;--run:paused;--u:.5vw;
  --t:clamp(10.5px,calc(var(--u)*2.6),18px);--t2:clamp(9.5px,calc(var(--u)*2.25),15px);--t3:clamp(13px,calc(var(--u)*3.4),24px);
  font-size:var(--t);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:820px){.g{--u:.9vw}}
@supports (width:1cqw){.g{--u:1cqw}}
.is-live .g{--run:running}
.no-js .g,.g--still{--run:running}
/* important, because every "animation:" below would otherwise set a picture running again by itself */
.g *{animation-play-state:var(--run)!important}
@keyframes gin{from{opacity:0;transform:translate3d(0,10px,0) scale(.97)}}
@keyframes gpop{from{opacity:0;transform:scale(.7)}}
@keyframes gbrief{0%{opacity:0;transform:scale(.8)}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:none}}     /* there for a moment, then gives way */
.g svg{flex:none;width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-pill{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1em;border-radius:99px;background:var(--wash);color:var(--ink);white-space:nowrap}
.g-pill.g-ok{background:var(--ok-bg);color:var(--ok)}
.g-pill--glass{background:rgba(255,255,255,.92);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}

/* plan: next month as a calendar. The post days fill in, it goes to the client, and comes back approved */
.g-plan{display:grid;gap:calc(var(--u)*1.9);width:84%}
.g-top{display:flex;align-items:baseline;justify-content:space-between;gap:1em}
.g-top b,.g-h{font-size:var(--t3);letter-spacing:-.03em}
.g-key{display:flex;align-items:center;gap:.5em;font-size:var(--t2);font-weight:600;color:var(--ink-2)}
.g-key i{width:.85em;height:.85em;border-radius:28%;background:var(--ink)}
.g-key i.k-s{margin-left:.7em;background:var(--accent)}
.g-week,.g-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--u)*1.3)}
.g-week span{font-size:var(--t2);font-weight:600;color:var(--ink-3);text-align:center}
.g-cal i{display:grid;place-items:center;height:calc(var(--u)*6.5);border-radius:calc(var(--u)*1.7);background:var(--wash);color:var(--ink-3);font-style:normal;font-size:var(--t);font-weight:600;font-variant-numeric:tabular-nums}
.g-cal i.p,.g-cal i.s{background:var(--ink);color:#fff;font-weight:700;animation:gday .45s var(--ease-out) backwards;animation-delay:calc(var(--n)*.13s + .35s)}
.g-cal i.s{background:var(--accent);color:var(--ink)}
@keyframes gday{0%{background-color:var(--wash);color:var(--ink-3);transform:none}55%{transform:scale(1.1)}}
.g-foot{display:grid;justify-items:end}
.g-foot>*{grid-area:1/1}
.g-wait{opacity:0;animation:gbrief 1.5s var(--ease-out) both;animation-delay:2.3s}
.g-foot .g-ok{animation:gpop .5s var(--ease-pop) backwards;animation-delay:3.75s}

/* film: the camera's view on a shoot day */
.g-view{position:absolute;inset:0}
.g-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;animation:gzoom 9s ease-in-out infinite alternate}
@keyframes gzoom{from{transform:scale(1.04)}to{transform:scale(1.18) translate3d(-2%,1%,0)}}
.g-view::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 62%,rgba(0,0,0,.4))}
.g-corners{position:absolute;inset:8%;z-index:1;border-radius:calc(var(--u)*2.4);
  background:
    linear-gradient(#fff,#fff) 0 0/26px 2.5px,linear-gradient(#fff,#fff) 0 0/2.5px 26px,
    linear-gradient(#fff,#fff) 100% 0/26px 2.5px,linear-gradient(#fff,#fff) 100% 0/2.5px 26px,
    linear-gradient(#fff,#fff) 0 100%/26px 2.5px,linear-gradient(#fff,#fff) 0 100%/2.5px 26px,
    linear-gradient(#fff,#fff) 100% 100%/26px 2.5px,linear-gradient(#fff,#fff) 100% 100%/2.5px 26px;
  background-repeat:no-repeat}
.g-focus{position:absolute;z-index:1;left:42%;top:26%;width:19%;aspect-ratio:1;border:2.5px solid var(--amber);border-radius:22%;animation:gfocus 4.5s var(--ease-in-out) infinite}
@keyframes gfocus{0%,100%{transform:translate3d(-60%,30%,0) scale(1.5);opacity:.5}18%,82%{transform:none;opacity:1}}
.g-rec{position:absolute;z-index:1;left:12%;top:14%;display:flex;align-items:center;gap:.5em;color:#fff;letter-spacing:.02em}
.g-rec::before{content:"";width:.8em;height:.8em;border-radius:50%;background:var(--accent);animation:gblink 1.2s steps(2,jump-none) infinite}
@keyframes gblink{50%{opacity:.15}}
.g-at{position:absolute;z-index:1;left:0;right:0;bottom:13%;width:max-content;margin:0 auto;animation:gin .5s var(--ease-out) backwards;animation-delay:.7s}

/* edit: the video on the left with its caption on, the cut on the right, and the playhead running through it */
.g-edit{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(var(--u)*5.5);width:86%}
.g-prev{position:relative;height:calc(var(--u)*47);aspect-ratio:9/16;border-radius:calc(var(--u)*2.8);overflow:hidden;background:var(--ink);box-shadow:var(--sh-2)}
.g-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-cap{position:absolute;left:9%;right:9%;bottom:8%;padding:.45em .3em;border-radius:.55em;background:#fff;font-size:var(--t2);text-align:center;animation:gpop .45s var(--ease-pop) backwards;animation-delay:1.6s}
.g-side{display:grid;gap:calc(var(--u)*3.4);min-width:0}
.g-time{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u)*2.2)}
.g-names,.g-tracks{display:grid;grid-auto-rows:calc(var(--u)*5.6);gap:calc(var(--u)*2.2)}
.g-names span{align-self:center;font-size:var(--t2);font-weight:600;color:var(--ink-2)}
.g-tracks{position:relative}
.g-track{display:flex;gap:1.6%}
.g-track i{flex:var(--f,1) 1 0;border-radius:calc(var(--u)*1.4);background:var(--ink);transform-origin:0 50%;animation:gclip .5s var(--ease-out) backwards;animation-delay:calc(var(--n)*.12s + .3s)}
.g-track i.a{background:var(--accent)}
.g-track--wave{align-items:center;gap:1.1%}
.g-track--wave i{flex:1 1 0;height:calc(var(--h)*1%);border-radius:99px;background:#cfc8bc;animation:gwave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.09s)}
.g-track--caps i{height:54%;align-self:center;background:#d8d2c8}
@keyframes gclip{from{transform:scaleX(0);opacity:0}}
@keyframes gwave{to{transform:scaleY(.42)}}
.g-run{position:absolute;inset:calc(var(--u)*-1.4) 0}
.g-run b{position:absolute;inset:0;transform:translate3d(100%,0,0);animation:ghead 3.4s linear backwards;animation-delay:.6s}
.g-run b::before{content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:3px;border-radius:3px;background:var(--accent)}
.g-run b::after{content:"";position:absolute;left:-6.5px;top:-6px;width:13px;height:13px;border-radius:4px 4px 50% 50%;background:var(--accent)}
@keyframes ghead{from{transform:none}}
.g-done{justify-self:start;animation:gpop .5s var(--ease-pop) backwards;animation-delay:4.1s}

/* post: the week's times, each turning to "Posted" as it goes out on the phone beside it */
/* one row exactly as tall as the frame: the phone is taller than that on purpose and runs off the bottom.
   Its size is written out rather than left to a percentage and a ratio, which Safari gives no width. */
.g-post{grid-template:100%/minmax(0,1fr) auto;justify-items:stretch;gap:calc(var(--u)*5);padding:0 calc(var(--u)*8) 0 calc(var(--u)*7)}
.g-sched{display:grid;gap:calc(var(--u)*1.5)}
.g-h{margin-bottom:calc(var(--u)*.6)}
.g-slot{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.8em 1em;border-radius:calc(var(--u)*2.2);background:var(--wash)}
.g-slot:nth-of-type(1){--at:.8s}
.g-slot:nth-of-type(2){--at:2.8s}
.g-slot:nth-of-type(3){--at:4.8s}
.g-state{display:grid;justify-items:end}
.g-state>*{grid-area:1/1;display:inline-flex;align-items:center;gap:.35em;font-size:var(--t2);font-style:normal;text-decoration:none}
.g-state u{font-weight:600;color:var(--ink-3);opacity:0;animation:guntil var(--at) linear both}
.g-state em{color:var(--ok);animation:gpop .45s var(--ease-pop) backwards;animation-delay:var(--at)}
@keyframes guntil{0%,92%{opacity:1}100%{opacity:0}}
.g-phone{position:relative;align-self:start;width:calc(var(--u)*39);height:calc(var(--u)*74);margin-top:calc(var(--u)*11);border-radius:calc(var(--u)*5.6) calc(var(--u)*5.6) 0 0;background:var(--ink);padding:calc(var(--u)*1.6) calc(var(--u)*1.6) 0;box-shadow:var(--sh-3)}
.g-screen{position:relative;height:100%;border-radius:calc(var(--u)*4.2) calc(var(--u)*4.2) 0 0;background:var(--paper);overflow:hidden}
.g-feed{position:absolute;inset:0;display:grid;grid-auto-rows:max-content;gap:calc(var(--u)*2);padding:calc(var(--u)*2.6) calc(var(--u)*1.9);animation:gfeed 6.8s var(--ease-in-out) both}
.g-postcard{display:grid;gap:calc(var(--u)*1.4)}
.g-postcard b{display:flex;align-items:center;gap:calc(var(--u)*1.2);height:calc(var(--u)*2.8)}
.g-postcard b::before{content:"";width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);border-radius:50%;background:var(--accent)}
.g-postcard b::after{content:"";width:46%;height:calc(var(--u)*1.2);border-radius:6px;background:var(--line)}
.g-postcard img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--u)*2)}
@keyframes gfeed{0%,36%{transform:none}44%,65%{transform:translate3d(0,-36%,0)}73%,100%{transform:translate3d(0,-72%,0)}}

/* reply: a customer's question, and the answer going back */
.g-chat{display:grid;gap:calc(var(--u)*1.3);width:80%}
.g-who{font-size:var(--t2);font-weight:600;color:var(--ink-3);animation:gin .4s var(--ease-out) backwards;animation-delay:.2s}
.g-who--us{justify-self:end;margin-top:calc(var(--u)*2);animation-delay:1.3s}
.g-chat p{max-width:78%;padding:.72em 1.05em;border-radius:1.25em;font-size:clamp(14px,calc(var(--u)*3.3),26px);font-weight:500;line-height:1.3}
.g-chat .in{justify-self:start;background:var(--wash);border-bottom-left-radius:.35em;animation:gin .5s var(--ease-out) backwards;animation-delay:.3s}
.g-turn{display:grid;justify-items:end}
.g-turn>*{grid-area:1/1}
.g-chat .out{background:var(--ink);color:#fff;border-bottom-right-radius:.35em;animation:gin .5s var(--ease-out) backwards;animation-delay:3s}
.g-chat .dots{align-self:start;display:flex;gap:calc(var(--u)*1);padding:calc(var(--u)*1.7) calc(var(--u)*2.2);border-radius:1.25em;border-bottom-right-radius:.35em;background:var(--ink);opacity:0;animation:gbrief 1.6s ease both;animation-delay:1.4s}
.g-chat .dots i{width:max(6px,calc(var(--u)*1.3));height:max(6px,calc(var(--u)*1.3));border-radius:50%;background:#fff;animation:gbounce .9s ease-in-out infinite;animation-delay:calc(var(--n)*.14s)}
@keyframes gbounce{50%{transform:translate3d(0,-4px,0);opacity:.5}}
.jscene--peach .g-cal i,.jscene--wash .g-cal i,.jscene--peach .g-chat .in,.jscene--wash .g-chat .in,.jscene--peach .g-slot,.jscene--wash .g-slot{background-color:var(--cream)}

/* advertise: the advert as people see it, and the people nearby it is shown to */
.g-ads{grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u)*4);padding:0 calc(var(--u)*7)}
.g-ad{display:grid;gap:calc(var(--u)*1.7);width:calc(var(--u)*31);padding:calc(var(--u)*1.9);border-radius:calc(var(--u)*3);background:#fff;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);animation:gin .6s var(--ease-out) backwards;animation-delay:.15s}
.g-ad__top{display:flex;align-items:center;gap:.6em;font-size:var(--t2);line-height:1.15}
.g-ad__top i{flex:none;width:calc(var(--u)*4.6);height:calc(var(--u)*4.6);border-radius:50%;background:var(--accent)}
.g-ad__top span{display:grid}
.g-ad__top em{font-style:normal;font-weight:600;color:var(--ink-3)}
.g-ad img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:calc(var(--u)*1.7)}
.g-ad__cta{display:flex;align-items:center;justify-content:space-between;padding:.6em 1em;border-radius:99px;background:var(--ink);color:#fff;font-size:var(--t2)}
.g-reach{display:grid;justify-items:center;gap:calc(var(--u)*2.6)}
.g-near{position:relative;width:calc(var(--u)*33);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.g-near i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:gring 4.2s ease-out infinite;animation-delay:calc(var(--n)*1.4s)}
@keyframes gring{0%{transform:scale(.12);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.g-near b{position:absolute;left:50%;top:50%;width:17%;aspect-ratio:1;margin:-8.5% 0 0 -8.5%;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg)}
.g-near b::after{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--night)}
.g-near u{position:absolute;width:6%;aspect-ratio:1;border-radius:50%;background:var(--amber);animation:gseen .6s var(--ease-pop) backwards;animation-delay:calc(var(--n)*.3s + .6s)}
@keyframes gseen{from{transform:scale(.5);opacity:.25;background-color:#fff}}
.g-shown{animation:gpop .5s var(--ease-pop) backwards;animation-delay:3.2s}

/* ------------------------------------------------------------------ a full-width picture that opens out */
.band{position:relative;margin-inline:clamp(8px,1.4vw,22px);aspect-ratio:2/1;border-radius:var(--r-xl);overflow:hidden;background:var(--night);color:#fff;box-shadow:var(--sh-3)}
.band picture{position:absolute;inset:0}
.band img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;object-fit:cover;will-change:transform}
@media (max-aspect-ratio:4/5){.band{aspect-ratio:4/5}}
.band__cap{position:absolute;left:clamp(14px,2.6vw,40px);right:clamp(14px,2.6vw,40px);bottom:clamp(14px,2.6vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 40px;z-index:1}
.js.pin .band{will-change:clip-path}

/* ------------------------------------------------------------------ a month, as a phone that fills with posts */
.month{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch;gap:clamp(22px,4.4vw,72px);padding:clamp(18px,3vw,52px);padding-bottom:0;overflow:hidden}
.month__side{display:grid;align-content:center;gap:clamp(16px,2vw,26px);justify-items:start;padding-bottom:clamp(18px,3vw,52px)}
@media (max-width:860px){.month{grid-template-columns:minmax(0,1fr)}}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border-radius:999px;background:var(--wash);justify-self:start;max-width:100%}
.seg__b{position:relative;z-index:1;min-height:46px;padding:0 clamp(14px,2vw,26px);border:0;border-radius:999px;background:none;font-weight:700;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;color:var(--ink-2);cursor:pointer;transition:color .25s ease,transform .16s var(--ease-out)}
.seg__b:active{transform:scale(.96)}
.seg__b[aria-pressed="true"]{color:#fff}
.seg__thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:10px;border-radius:999px;background:var(--ink);box-shadow:0 8px 18px -8px rgba(23,22,27,.6);transform-origin:0 50%;transition:transform .3s var(--ease-drawer)}
/* small phones: the switches shrink rather than push the page wider */
.seg__b{min-width:0}
@media (max-width:440px){
  .seg__b{padding-inline:12px;font-size:.9375rem}
}
@media (max-width:350px){.seg__b{padding-inline:7px;font-size:.8125rem}}
.no-js .seg{display:none}
.plan__alt{color:var(--ink-2);font-size:.9375rem}
.plan--pick .plan__alt{color:rgba(255,255,255,.78)}

/* the words beside the phone: how many posts, where they come from, and what the shoot gives */
.mcount{display:flex;align-items:flex-end;gap:clamp(10px,1.3vw,20px)}
.mcount b{font-size:clamp(5.25rem,11.5vw,11rem);line-height:.76;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.mcount span{padding-bottom:.12em;font-size:clamp(1.125rem,1.75vw,1.6875rem);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.mfrom{font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.3;letter-spacing:-.012em;color:var(--ink-2)}
.mfrom b{color:var(--ink)}
.mgets{list-style:none;display:flex;gap:8px;justify-self:stretch;max-width:30rem}
.mgets li{flex:1 1 0;min-width:0;display:grid;align-content:start;gap:4px;padding:clamp(11px,1.1vw,16px) clamp(12px,1.2vw,18px);border-radius:var(--r-m);background:var(--cream)}
.mgets b{font-size:clamp(1.625rem,2.3vw,2.25rem);line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.mgets span{font-size:.8125rem;font-weight:700;line-height:1.2;color:var(--ink-2)}

/* what we take off your hands: four jobs, each plainly on or off for the package picked */
/* beside the phone: what is in every package, and the switches for what can be added or taken away */
.mopts{list-style:none;display:grid;justify-self:stretch;max-width:34rem;border-top:1px solid var(--line)}
.mopts li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:clamp(11px,1.1vw,15px) 0;border-bottom:1px solid var(--line)}
.mopts li:last-child{border-bottom:0}
.mopts li>i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);box-shadow:0 8px 14px -8px rgba(255,74,28,.9);transition:background-color .25s ease,box-shadow .25s ease}
.mopts li>i::before{content:"";position:absolute;left:9.5px;top:5px;width:6px;height:11px;border:solid var(--ink);border-width:0 2.4px 2.4px 0;transform:rotate(42deg)}
/* off: a plus, because it is there to be added */
.mopts .is-off>i{background:var(--wash);box-shadow:none}
.mopts .is-off>i::before{left:7.5px;top:11.8px;width:11px;height:0;border-width:0 0 2.4px;border-color:var(--ink-3);transform:none}
.mopts .is-off>i::after{content:"";position:absolute;left:11.8px;top:7.5px;width:0;height:11px;border-left:2.4px solid var(--ink-3)}
.mopts li>div:not(.opts){flex:1 1 0;min-width:0;display:grid;gap:1px}
.mopts b{font-size:1rem;line-height:1.3;letter-spacing:-.02em}
.mopts li>div:not(.opts) span{font-size:.875rem;line-height:1.32;color:var(--ink-2);text-wrap:pretty}
.mopts em{flex:none;font-style:normal;font-size:.8125rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.mopts .tog{flex:none;width:52px;height:32px}
.mopts .tog i{width:24px;height:24px}
.mopts .tog[aria-checked="true"] i{transform:translate3d(20px,0,0)}
/* replies has three choices, which sit on a line of their own under the words */
.mopts .opts{flex:1 1 100%;justify-content:flex-start;padding-left:38px}
.mopts .opt{min-height:40px;padding:0 14px;font-size:.875rem}
.mopts .opt span{margin-left:3px;font-weight:400;opacity:.72}
.no-js .mopts .tog,.no-js .mopts .opts{display:none}
/* under a finger the switch and the small "Off" are easier to hit than they look */
@media (pointer:coarse){.mopts .tog::before{content:"";position:absolute;inset:-8px -6px}.mopts .opt{min-width:48px}}
/* on a phone the three choices share the row equally, each with its price underneath */
@media (max-width:480px){
  .mopts .opts{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:6px;padding-left:0}
  .mopts .opt{min-height:48px;padding:0 10px;line-height:1.15}
  .mopts .opt span{display:block;margin:1px 0 0}
}
.mprice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;justify-self:stretch;max-width:34rem;padding-top:clamp(14px,1.6vw,22px);border-top:1px solid var(--line)}
.mprice>span{font-weight:700;color:var(--ink-2)}
.mprice small{display:block;margin-top:5px;font-size:.8125rem;font-weight:400;line-height:1.3;color:var(--ink-2);max-width:26ch}
.mprice small:empty{display:none}
.mprice b{margin-right:4px;font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}

/* the phone stands on the bottom edge of the card, so its lower end is cut off by it */
.mphone{--pw:clamp(230px,22vw,300px);--pr:clamp(34px,3.3vw,46px);position:relative;align-self:end;justify-self:center;width:var(--pw);height:clamp(350px,37vw,540px)}
.mphone::before{content:"";position:absolute;z-index:0;left:-46%;right:-46%;top:-4%;bottom:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,74,28,.3),rgba(255,180,94,.16) 58%,rgba(255,180,94,0));pointer-events:none}
.mphone__tilt{position:absolute;z-index:1;left:0;top:0;width:100%}
.mphone__body{position:relative;aspect-ratio:9/19.5;padding:9px;border-radius:var(--pr);background:var(--night);box-shadow:var(--sh-3),inset 0 0 0 1.5px rgba(255,255,255,.14);transform:rotate(-3deg);transform-origin:50% 30%}
/* the buttons on its edges */
.mphone__body::before,.mphone__body::after{content:"";position:absolute;width:3px;border-radius:2px;background:var(--night-2)}
.mphone__body::before{left:-3px;top:17%;height:8%}
.mphone__body::after{right:-3px;top:22%;height:12%}
.mphone__screen{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;border-radius:calc(var(--pr) - 9px);background:var(--paper);overflow:hidden}
.mphone__screen::before{content:"";position:absolute;z-index:3;left:50%;top:9px;width:26%;height:18px;margin-left:-13%;border-radius:999px;background:var(--night)}
.mphone__top{display:flex;align-items:center;gap:10px;padding:36px 14px 11px}
.mphone__av{flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,var(--amber),var(--accent));box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent)}
.mphone__top p{display:grid;min-width:0;line-height:1.15}
.mphone__top b{font-size:.8125rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mphone__top p>span{font-size:.6875rem;color:var(--ink-3);white-space:nowrap}
.mphone__feed{position:relative;overflow:hidden}
/* empty places wait underneath, three to a row, and a picture drops into each one */
.mphone__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 133.57' preserveAspectRatio='none'%3E%3Cg fill='%23f3eee6'%3E%3Crect width='98.58' height='131.44'/%3E%3Crect x='100.71' width='98.58' height='131.44'/%3E%3Crect x='201.42' width='98.58' height='131.44'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% auto repeat-y}
.mphone__grid i{position:relative;display:block;aspect-ratio:3/4;background:url("media/feed.webp") calc(var(--x)*100%/6) calc(var(--y)*100%/3)/700% 400% no-repeat}
/* the sheet of pictures is only fetched once the phone is nearly on screen */
.js .mphone:not(.is-near) .mphone__grid i{background-image:none}
.mphone__grid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a small play mark on the ones that are videos */
.mphone__grid .is-v::after{content:"";position:absolute;z-index:1;right:7%;top:6%;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
/* now and then a heart rises from one of them */
.mlike{position:absolute;z-index:2;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;box-shadow:0 6px 14px -4px rgba(0,0,0,.5);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 20.2L4 12.3A5 5 0 0 1 12 6.4A5 5 0 0 1 20 12.3Z'/%3E%3C/svg%3E") 50% 54%/62% no-repeat}
/* little notices that float beside the phone */
.mping{position:absolute;z-index:2;white-space:nowrap;font-size:.8125rem;padding:8px 13px 8px 10px;animation:mfloat 6s ease-in-out infinite}
.mping svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mping--a{left:-62%;top:44%;padding:9px}
.mping--b{right:-27%;top:25%;animation-duration:7.2s;animation-delay:-2.4s}
/* a short conversation: a customer's message and the reply we sent */
.mchat{display:grid;gap:5px;width:max-content;max-width:212px;padding:9px;border-radius:20px;white-space:normal;line-height:1.25;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 16px 36px -14px rgba(0,0,0,.5),var(--edge)}
.mchat__q{justify-self:start;padding:7px 11px;border-radius:14px 14px 14px 4px;background:var(--wash)}
.mchat__a{justify-self:end;padding:7px 11px;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff}
.mchat__by{display:flex;align-items:center;gap:6px;padding:2px 3px 0;font-size:.75rem;font-weight:700;color:var(--accent-ink)}
.mchat__by svg{width:15px;height:15px}
/* the picture that is running as an advert */
.mad{position:absolute;z-index:1;left:6%;bottom:6%;padding:3px 7px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:.5625rem;font-weight:700;font-style:normal;line-height:1.3;letter-spacing:.03em;text-transform:uppercase}
.mphone__grid .is-ad{box-shadow:inset 0 0 0 2.5px var(--accent)}
.mping--c{right:-21%;top:11%;padding-left:12px;animation-duration:6.6s;animation-delay:-4.1s}
@keyframes mfloat{50%{translate:0 -7px}}
@media (max-width:1180px){.mping--a{left:-60%;max-width:176px;font-size:.75rem}}
@media (max-width:860px){.mping--a{left:-70%;top:40%}.mping--b{right:-30%}.mping--c{right:-17%;top:-3.5%}}
@media (max-width:560px){.mping--a{left:-19%;top:60%}.mping--b{right:-19%}}
@media (max-width:440px){.mping--a{left:-7%}.mping--b{right:-7%}.mping--c{right:-6%}.mgets span{font-size:.75rem}.mgets li{padding-inline:11px}}

/* arriving: the phone leans in, the pictures drop into their places one after another, the notices pop */
.js .mphone:not(.is-on) .mphone__body{transform:translate3d(0,9%,0) rotate(-8deg)}
.js .mphone.is-on .mphone__body{transition:transform 1.2s var(--ease-out)}
.js .mphone:not(.is-on) .mphone__grid i{opacity:0;transform:scale(.8)}
.js .mphone.is-on .mphone__grid i{transition:opacity .25s ease calc(var(--n)*42ms + 260ms),transform .5s var(--ease-pop) calc(var(--n)*42ms + 260ms)}
.js .mphone:not(.is-on) .mping{opacity:0;transform:scale(.7)}
.js .mphone.is-on .mping{transition:opacity .3s ease var(--pd,.9s),transform .55s var(--ease-pop) var(--pd,.9s)}
.mping--a{--pd:1.05s}
.mping--b{--pd:1.3s}
.no-js .mping{animation:none}

/* ------------------------------------------------------------------ small choices: a row of options, an on/off switch */
.opts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.opt{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--wash);font-weight:700;font-size:.9375rem;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.opt:active{transform:scale(.96)}
.opt[aria-pressed="true"]{background:var(--ink);color:#fff}
.opt:disabled,.tog:disabled{opacity:.4;cursor:default}
.tog{position:relative;width:60px;height:36px;border:0;border-radius:999px;background:var(--wash);cursor:pointer;transition:background-color .25s ease}
.tog i{position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-1);transition:transform .25s var(--ease-drawer)}
.tog[aria-checked="true"]{background:var(--accent)}
.tog[aria-checked="true"] i{transform:translate3d(24px,0,0)}
@media (prefers-reduced-motion:reduce){.opt,.tog,.tog i{transition:none}}

/* ------------------------------------------------------------------ recent work: a strip of cards to swipe through
   The strip moves sideways by itself: swiped on a phone or a trackpad, dragged with a mouse, or
   stepped along with the two arrows under it. Scrolling down the page simply carries on down the
   page; nothing here holds it. */
.works{--edge:max(var(--gutter),calc((100vw - 1440px)/2));padding-block:clamp(52px,7vw,116px) clamp(44px,6vw,100px)}
.works__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34ch);align-items:end;gap:14px 56px;margin-bottom:clamp(14px,2.6vw,40px)}
.works__head p{color:var(--ink-2);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.42;text-wrap:pretty}
/* the strip. Its padding underneath is room for the cards' shadows, which something that scrolls would otherwise cut off */
.works__track{display:flex;align-items:center;gap:clamp(22px,4vw,72px);overflow-x:auto;overflow-y:hidden;scroll-padding-inline:var(--edge);
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:24px var(--edge) 116px;margin-bottom:-76px}
.works__track::-webkit-scrollbar{display:none}
.works__track::after{content:"";flex:none;width:4vw}
.works__track:focus-visible{outline-offset:-6px}
.fine .works__track{cursor:grab}
.works__track.is-held{scroll-snap-type:none!important;scroll-behavior:auto;cursor:grabbing}
.wcard{flex:none;display:grid;grid-template-columns:auto minmax(0,26ch);align-items:end;gap:clamp(16px,2.4vw,36px);text-decoration:none;scroll-snap-align:start;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.wcard__media{position:relative;height:min(60vh,620px);aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--wash);box-shadow:var(--sh-3)}
.wcard__media picture{width:100%;height:100%}
.wcard__media img{width:114%;max-width:none;height:100%;margin-left:-7%;object-fit:cover;will-change:transform;-webkit-user-drag:none}
.wcard__text{display:grid;gap:14px;justify-items:start;padding-bottom:clamp(8px,2vw,32px)}
.wcard__text p{color:var(--ink-2);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.42;max-width:30ch;text-wrap:pretty}
.wcard__no{font-size:.9375rem;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.wcard--end{grid-template-columns:1fr;place-items:center;align-content:center;gap:22px;height:min(60vh,620px);aspect-ratio:4/5;padding:clamp(28px,5vw,72px);border-radius:var(--r-xl);background:var(--ink);color:#fff;text-align:center;box-shadow:var(--sh-3)}
.wcard--end i{display:grid;place-items:center;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--ink);font-style:normal;font-weight:700;font-size:1.5rem;transition:transform .4s var(--ease-out)}
.wcard--end i::before{content:"\2192"}
/* under the strip: how far along it is, and an arrow each way for anyone with a mouse and no way to swipe */
.works__foot{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,20px)}
.no-js .works__foot{display:none}
.works__bar{width:min(260px,44vw);height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.works__bar i{display:block;height:100%;border-radius:4px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.works__go{flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;padding:0;background:var(--wash);color:var(--ink);cursor:pointer;transition:transform .16s var(--ease-out),opacity .2s ease,background-color .2s ease}
.works__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.works__go:active{transform:scale(.94)}
.works__go[disabled]{opacity:.35;cursor:default}
/* on a phone a card is most of the screen, so the strip settles on one card at a time; on a wide screen it runs freely */
@media (max-width:820px){
  .works__head{grid-template-columns:1fr}
  .works__track{align-items:flex-start;scroll-snap-type:x mandatory}
  .wcard{grid-template-columns:1fr;width:76vw;align-items:start;gap:14px}
  .wcard__media{width:100%;height:auto}
  .wcard__text p{font-size:1rem}
  .wcard--end{width:66vw;height:auto}
}
@media (hover:hover) and (pointer:fine){
  .wcard__media img{transition:scale .9s var(--ease-out)}
  .wcard:hover .wcard__media img{scale:1.04}
  .wcard--end:hover i{transform:translate3d(8px,0,0) scale(1.06)}
  .works__go:not([disabled]):hover{background:var(--ink);color:#fff}
}

/* ------------------------------------------------------------------ package rows (home) */
.tiers{display:grid;padding:clamp(6px,1vw,14px)}
.tier{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto 56px;align-items:center;gap:10px clamp(16px,3vw,48px);padding:clamp(20px,2.6vw,36px) clamp(16px,2.6vw,40px);border-radius:calc(var(--r-xl) - 10px);text-decoration:none;isolation:isolate;overflow:hidden}
.tier+.tier{margin-top:2px}
.tier::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--cream);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease-out)}
.tier--pick::before{transform:none;background:var(--peach)}
.tier h3{font-size:clamp(2rem,5vw,4.75rem);line-height:.95;letter-spacing:-.05em}
.tier p{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.1875rem);line-height:1.4;max-width:40ch;text-wrap:pretty}
.tier__price{font-size:clamp(1.5rem,2.6vw,2.5rem);font-weight:700;letter-spacing:-.04em;white-space:nowrap;text-align:right}
.tier__price small{display:block;font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--ink-2)}
.tier__go{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:1.2rem;transition:background-color .25s ease,color .25s ease,transform .3s var(--ease-out)}
.tier__go::before{content:"\2192"}
.tier__tag{display:inline-block;margin-left:.7em;padding:5px 11px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:.8125rem;font-weight:700;letter-spacing:0;vertical-align:middle;white-space:nowrap}
.tiers__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;margin-top:clamp(24px,3.4vw,44px)}
.tiers__foot p{color:var(--ink-2);max-width:52ch}
@media (hover:hover) and (pointer:fine){
  .tier:hover::before{transform:none}
  .tier:hover .tier__go{background:var(--accent);color:var(--ink);transform:rotate(-45deg) scale(1.06)}
}
@media (max-width:820px){
  .tier{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .tier h3{grid-column:1}
  .tier p{grid-column:1/-1;grid-row:2}
  .tier__price{grid-column:2;grid-row:1}
  .tier__go{display:none}
}

/* ------------------------------------------------------------------ package cards (packages page) */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);align-items:stretch}
.plan{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:22px;padding:clamp(22px,2.4vw,38px);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-2),var(--edge);scroll-margin-top:calc(var(--nav-h) + 28px);transform-style:preserve-3d}
.plan--pick{background:var(--night);color:#fff;box-shadow:var(--sh-3)}
.plan--pick::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 60% at 100% 0%,rgba(255,74,28,.34),rgba(255,74,28,0) 70%)}
.plan>*{position:relative;z-index:1}
.plan__head{display:grid;gap:10px}
.plan__head h2{font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1;letter-spacing:-.04em}
.plan__head p{color:var(--ink-2);line-height:1.4;min-height:2.8em;text-wrap:pretty}
.plan--pick .plan__head p{color:rgba(255,255,255,.78)}
.plan__pick{position:absolute;top:2px;right:0;padding:5px 11px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:.8125rem;font-weight:700}
.plan__price{display:flex;align-items:baseline;gap:10px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.plan--pick .plan__price{border-color:rgba(255,255,255,.16)}
.plan__price b{font-size:clamp(3rem,5.4vw,5.25rem);line-height:.9;letter-spacing:-.055em}
.plan__price span{color:var(--ink-2);font-size:.9375rem}
.plan--pick .plan__price span{color:rgba(255,255,255,.78)}
.plan ul{list-style:none;display:grid;gap:11px;align-content:start}
.plan li{position:relative;padding-left:30px;line-height:1.38}
/* a tick in a soft circle, drawn when the card arrives */
.plan li::before{content:"";position:absolute;left:0;top:.14em;width:20px;height:20px;border-radius:50%;background:var(--peach)}
.plan--pick li::before{background:var(--accent)}
.plan li::after{content:"";position:absolute;left:6.5px;top:calc(.14em + 5px);width:7px;height:9px;border:solid var(--ink);border-width:0 2.2px 2.2px 0;transform:rotate(42deg) scale(1);transform-origin:60% 60%}
.js .plan li::before{transform:scale(0)}
.js .plan li::after{transform:rotate(42deg) scale(0)}
.js .plan.is-in li::before{transform:none;transition:transform .45s var(--ease-pop) calc(var(--d,0)*1ms + var(--k,0)*55ms + 240ms)}
.js .plan.is-in li::after{transform:rotate(42deg) scale(1);transition:transform .4s var(--ease-pop) calc(var(--d,0)*1ms + var(--k,0)*55ms + 330ms)}
.plan li.plan__alt::before,.plan li.plan__alt::after{display:none}
.plan li.plan__alt{padding-left:0}
.plan .btn{align-self:end}
.plan--pick .btn{--bg:#fff;--fg:var(--ink)}
@media (max-width:980px){.plans{grid-template-columns:1fr}.plan__head p{min-height:0}}

/* ------------------------------------------------------------------ the people on the About page */
.team{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:clamp(12px,1.4vw,22px)}
.person{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-l);overflow:hidden;background:var(--paper);box-shadow:var(--sh-2),var(--edge)}
.person__pic{display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;background:var(--wash)}
.person__pic img{width:100%;height:100%;object-fit:cover}
/* no photo yet: their initials */
.person__pic--init{background:var(--peach)}
.person__pic b{font-size:clamp(4.5rem,9vw,8rem);line-height:1;letter-spacing:-.03em;color:var(--accent)}
.person__text{display:grid;gap:6px;align-content:start;padding:clamp(18px,2vw,30px)}
.person h3{font-size:clamp(1.375rem,2vw,1.875rem);line-height:1.06;letter-spacing:-.035em}
.person__role{font-size:.9375rem;font-weight:700;color:var(--accent-ink)}
.person__text p:last-child{margin-top:6px;color:var(--ink-2);line-height:1.42;max-width:44ch;text-wrap:pretty}
/* one person: the card lies on its side */
.team--one{grid-template-columns:minmax(0,1fr)}
.team--one .person{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto;max-width:820px}
.team--one .person__pic{aspect-ratio:auto;min-height:clamp(220px,24vw,320px)}
.team--one .person__text{align-content:center;padding:clamp(22px,3vw,48px)}
@media (max-width:640px){
  .team--one .person{grid-template-columns:1fr}
  .team--one .person__pic{aspect-ratio:16/9;min-height:0}
}
/* two people: two cards on their sides, next to each other */
.team--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.team--two .person{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto}
.team--two .person__pic{aspect-ratio:auto;min-height:clamp(200px,20vw,280px)}
.team--two .person__pic b{font-size:clamp(3.5rem,6vw,5.5rem)}
.team--two .person__text{align-content:center}
@media (max-width:1060px){.team--two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .team--two .person{grid-template-columns:1fr}
  .team--two .person__pic{aspect-ratio:16/9;min-height:0}
}

/* ------------------------------------------------------------------ under the packages: what can be added, what can come off */
.adds__head{margin:clamp(44px,5.4vw,84px) 0 clamp(18px,2vw,28px)}
.adds{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.adds li{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;align-content:start;padding:clamp(18px,2vw,28px);border-radius:var(--r-l);background:var(--cream);box-shadow:var(--edge)}
.adds i{position:relative;width:30px;height:30px;margin-bottom:6px;border-radius:50%;background:var(--accent)}
.adds i::before,.adds__plus i::after{content:"";position:absolute;left:8.5px;top:13.8px;width:13px;height:2.4px;border-radius:2px;background:var(--ink)}
.adds__plus i::after{transform:rotate(90deg)}
.adds__minus i{background:var(--ink)}
.adds__minus i::before{background:#fff}
.adds h3{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.1;letter-spacing:-.03em}
.adds p{color:var(--ink-2);line-height:1.42;text-wrap:pretty}
.adds b{align-self:end;margin-top:8px;padding-top:12px;border-top:1px solid var(--line);font-size:.9375rem;letter-spacing:-.01em}
@media (max-width:860px){.adds{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ a year, counted up */
.year{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.ycard{display:grid;align-content:start;gap:clamp(16px,2vw,26px);padding:clamp(20px,2.4vw,36px);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-2),var(--edge)}
.ycard header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ycard h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.05;letter-spacing:-.035em}
.ycard header p{color:var(--ink-2);font-weight:700;font-size:.9375rem}
.ycard ul{list-style:none;display:grid;gap:clamp(10px,1.2vw,15px)}
.ycard li{display:flex;align-items:baseline;gap:14px}
.ycard li b{flex:none;min-width:2.1em;font-size:clamp(1.75rem,2.9vw,2.625rem);line-height:.95;letter-spacing:-.05em}
.ycard li span{color:var(--ink-2);line-height:1.3}
.ycard--pick{background:var(--night);color:#fff}
.ycard--pick header{border-color:rgba(255,255,255,.16)}
.ycard--pick header p,.ycard--pick li span{color:rgba(255,255,255,.78)}
.ycard__aim{display:grid;gap:3px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-2);line-height:1.4}
.ycard__aim b{color:var(--ink);font-size:.875rem}
.ycard--pick .ycard__aim{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.78)}
.ycard--pick .ycard__aim b{color:#fff}
/* the sum: their own figure for how many people see a post, times the posts in a year */
.ysum{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(18px,3vw,48px);margin-top:clamp(12px,1.4vw,22px);padding:clamp(22px,2.8vw,44px)}
.ysum h3{margin-bottom:10px;font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.05;letter-spacing:-.04em}
.ysum__ask p{color:var(--ink-2);font-size:1.0625rem;line-height:1.4}
.ysum__ask output{display:inline-block;min-width:2.9ch;font-size:1.25rem;font-weight:700;color:var(--ink)}
.ysum input[type=range]{display:block;width:100%;height:36px;margin-top:12px;accent-color:var(--accent);cursor:pointer}
.ysum__out{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ysum__out li{display:grid;gap:3px;min-width:0;padding:clamp(14px,1.5vw,20px);border-radius:var(--r-m);background:var(--cream)}
.ysum__out span{font-size:.875rem;font-weight:700;color:var(--ink-2)}
.ysum__out b{font-size:clamp(1.375rem,2.5vw,2.375rem);line-height:1;letter-spacing:-.05em}
.ysum__out em{font-style:normal;font-size:.8125rem;color:var(--ink-2)}
.ysum__note{grid-column:1/-1;max-width:80ch;color:var(--ink-3);font-size:.8125rem;line-height:1.45;text-wrap:pretty}
.ystart__head{margin:clamp(40px,5vw,76px) 0 clamp(18px,2vw,28px)}
.no-js .ysum input,.no-js .ysum__move{display:none}
@media (max-width:860px){.year{grid-template-columns:1fr}.ysum{grid-template-columns:1fr}}
@media (max-width:460px){.ysum__out{grid-template-columns:1fr}.ysum__out li{grid-template-columns:auto 1fr;align-items:baseline;gap:4px 12px}.ysum__out span{grid-column:1/-1}}

/* ------------------------------------------------------------------ why the packages are different sizes */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.rung{display:grid;align-content:start;gap:14px;padding:clamp(20px,2.4vw,36px);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-2),var(--edge)}
.rung__n{font-weight:700;color:var(--ink-2)}
.rung__n b{display:block;margin-bottom:4px;font-size:clamp(3.25rem,6.4vw,6rem);line-height:.84;letter-spacing:-.06em;color:var(--ink)}
/* four weeks of seven days; a square is lit on each day a post goes out */
.rung__dots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:230px}
.rung__dots i{aspect-ratio:1;border-radius:5px;background:var(--wash)}
.rung__dots i.on{background:var(--accent)}
.rung h3{font-size:clamp(1.25rem,1.7vw,1.5rem);letter-spacing:-.03em;line-height:1.1}
.rung p:last-child{color:var(--ink-2);line-height:1.42;text-wrap:pretty}
.rung--pick{background:var(--night);color:#fff}
.rung--pick .rung__n,.rung--pick p:last-child{color:rgba(255,255,255,.78)}
.rung--pick .rung__n b{color:#fff}
.rung--pick .rung__dots i{background:rgba(255,255,255,.12)}
.rung--pick .rung__dots i.on{background:var(--accent)}
.js .rung .rung__dots i.on{transform:scale(0)}
.js .rung.is-in .rung__dots i.on{transform:none;transition:transform .45s var(--ease-pop) calc(var(--k,0)*26ms + 200ms)}
.ladder__note{margin-top:clamp(22px,2.6vw,36px);max-width:62ch;color:var(--ink-2);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.42;text-wrap:pretty}
@media (max-width:860px){.ladder{grid-template-columns:1fr}.rung__dots{max-width:200px}}
@media (prefers-reduced-motion:reduce){.js .rung .rung__dots i.on{transform:none;transition:none}}

/* comparison table */
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem}
.compare th,.compare td{padding:16px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.35}
.compare thead th{font-size:clamp(1.125rem,1.6vw,1.5rem);letter-spacing:-.03em;vertical-align:bottom}
.compare thead td{border-bottom:1px solid var(--line)}
.compare tbody th{font-weight:400;color:var(--ink-2);width:26%}
.compare td{width:24.6%}
.compare .no{color:var(--ink-3)}
.compare .pick{background:var(--peach)}
.compare thead .pick{border-radius:20px 20px 0 0}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0;font-weight:700;color:var(--ink)}
.compare tr:last-child .pick{border-radius:0 0 20px 20px}
/* a row that says the same thing for all three packages */
.compare .compare__all td{color:var(--ink-2)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:clamp(8px,1.6vw,26px)}
.scrollx .compare{min-width:640px}
@media (hover:hover) and (pointer:fine){
  .compare tbody tr{transition:background-color .2s ease}
  .compare tbody tr:hover th,.compare tbody tr:hover td:not(.pick){background:var(--cream)}
}

/* plain-English notes: soft cards with a small drawing each */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.notes--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.note{position:relative;display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,34px);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1),var(--edge)}
.sheet--white .note,.note--tint{background:var(--cream);box-shadow:none}
.note h3{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.08;letter-spacing:-.035em}
.note p{color:var(--ink-2);max-width:48ch;text-wrap:pretty}
.ico{width:48px;height:48px;margin-bottom:6px;border-radius:16px;background:var(--peach);display:grid;place-items:center}
.ico svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.js .note .ico path,.js .note .ico circle,.js .note .ico rect{stroke-dasharray:1;stroke-dashoffset:1}
.js .note.is-in .ico path,.js .note.is-in .ico circle,.js .note.is-in .ico rect{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease-in-out) calc(var(--d,0)*1ms + 250ms)}
@media (max-width:980px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.notes,.notes--two{grid-template-columns:1fr}}
@media (hover:hover) and (pointer:fine){
  .note{transition:transform .3s var(--ease-out)}
  .note:hover{transform:translate3d(0,-4px,0)}
}

/* questions that open */
.faq{display:grid;gap:10px}
.faq__row{border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1),var(--edge);overflow:hidden}
.faq dt{margin:0}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:clamp(18px,2.2vw,28px) clamp(18px,2.4vw,34px);border:0;background:none;text-align:left;font-size:clamp(1.125rem,1.9vw,1.75rem);font-weight:700;line-height:1.1;letter-spacing:-.035em;cursor:pointer}
.faq__q i{position:relative;flex:none;width:38px;height:38px;border-radius:50%;background:var(--wash);transition:background-color .25s ease,transform .3s var(--ease-out)}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;left:12px;right:12px;top:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease-out)}
.faq__q i::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] i{background:var(--accent);transform:rotate(180deg)}
.faq__q[aria-expanded="true"] i::after{transform:rotate(0deg)}
.faq dd{display:grid;grid-template-rows:1fr;color:var(--ink-2);font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.5}
.faq dd>div{overflow:hidden;min-height:0}
.faq dd p{max-width:60ch;padding:0 clamp(18px,2.4vw,34px) clamp(20px,2.4vw,30px);text-wrap:pretty}
.js .faq dd{grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out)}
.js .faq dd>div{visibility:hidden;transition:visibility 0s linear .3s}
.js .faq__row.is-open dd{grid-template-rows:1fr}
.js .faq__row.is-open dd>div{visibility:visible;transition:visibility 0s}
.no-js .faq__q{cursor:default}
.no-js .faq__q i{display:none}

/* ------------------------------------------------------------------ before and after */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(12px,1.4vw,22px)}
.rcard{display:grid;gap:clamp(16px,2vw,26px);align-content:start;padding:clamp(22px,2.6vw,40px);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-2),var(--edge)}
.rcard__head{display:grid;gap:4px}
.rcard__head h3{font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1;letter-spacing:-.04em}
.rcard__head p{color:var(--ink-2);font-size:.9375rem}
.rstat{display:grid;gap:8px;padding-top:clamp(14px,1.6vw,20px);border-top:1px solid var(--line)}
.rstat__label{font-size:.9375rem;font-weight:700}
.rstat__nums{display:flex;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums}
.rstat__nums s{text-decoration:none;color:var(--ink-3);font-size:1.0625rem}
.rstat__nums s::after{content:" \2192"}
.rstat__nums b{font-size:clamp(2rem,3.6vw,3.25rem);line-height:.95;letter-spacing:-.05em}
.rstat__nums em{margin-left:auto;padding:5px 11px;border-radius:999px;background:var(--peach);font-size:.875rem;font-weight:700}
.rstat__bars{display:grid;gap:5px}
.rstat__bars i{display:block;height:10px;border-radius:10px;background:var(--line);transform-origin:0 50%}
.rstat__bars i+i{background:var(--accent)}
.js .rstat__bars i{transform:scaleX(0)}
.js .rcard.is-in .rstat__bars i{transform:none;transition:transform 1.2s var(--ease-out) calc(var(--d,0)*1ms + var(--k,0)*90ms + 200ms)}
.sect__head .results__flag{grid-column:1/-1;justify-self:start;padding:9px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:700;line-height:1.3}

/* ------------------------------------------------------------------ work page */
.project{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px clamp(16px,2vw,32px);align-items:start;padding-block:clamp(56px,8vw,128px);scroll-margin-top:calc(var(--nav-h) + 8px)}
.project+.project{border-top:1px solid var(--line)}
.project__side{grid-column:1/span 5;position:sticky;top:calc(var(--nav-h) + 36px);display:grid;gap:clamp(18px,2vw,28px);justify-items:start}
.project__side p{color:var(--ink-2);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.42;max-width:36ch;text-wrap:pretty}
.project__no{font-size:.9375rem;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.project__made{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.project__made li{padding:8px 14px;border-radius:999px;background:var(--cream);box-shadow:var(--edge);font-size:.875rem;font-weight:700}
.project__media{grid-column:7/span 6;display:grid;gap:clamp(12px,1.4vw,22px)}
.project--flip .project__side{grid-column:8/span 5;grid-row:1}
.project--flip .project__media{grid-column:1/span 6;grid-row:1}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.shot{border-radius:var(--r-l);overflow:hidden;background:var(--wash)}
.shot--full{grid-column:1/-1}
.shot img{width:100%;height:100%;object-fit:cover}
.shot--45{aspect-ratio:4/5}
.shot--916{aspect-ratio:9/16}
.shot--34{aspect-ratio:3/4}
.shot--169{aspect-ratio:16/9}
.shot--11{aspect-ratio:1}
.shot--23{aspect-ratio:2/3}
/* a small heading between two sets of pictures in the same piece of work */
.shots__label{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:clamp(14px,2vw,30px);font-size:.9375rem;font-weight:700;letter-spacing:-.01em;color:var(--accent-ink)}
.shots__label::after{content:"";flex:1;height:1px;background:var(--line)}
.film{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--night);aspect-ratio:9/16;max-height:min(84vh,860px);justify-self:start;width:auto;box-shadow:var(--sh-3)}
.film video{width:100%;height:100%;object-fit:cover}
.film__play{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;background:rgba(0,0,0,.14);cursor:pointer;transition:opacity .3s ease}
/* a film whose cover has a face and lettering in the middle: the play button sits at the foot, clear of them */
.film--low .film__play{place-items:end center;padding-bottom:5%}
.film__play span{position:relative;display:grid;place-items:center;width:clamp(84px,9vw,124px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:700;font-size:1rem;letter-spacing:-.01em;transition:transform .4s var(--ease-out)}
.film__play span::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.film__play:active span{transform:scale(.95)}
.film.is-on .film__play{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.film__play:hover span{transform:scale(1.08)}}
@media (max-width:900px){
  .project__side,.project--flip .project__side{grid-column:1/-1;grid-row:auto;position:static}
  .project__media,.project--flip .project__media{grid-column:1/-1;grid-row:auto}
  .film{max-height:none;width:min(100%,440px)}
}

/* ------------------------------------------------------------------ about */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px clamp(16px,2vw,32px);align-items:start}
.split__text{grid-column:1/span 6;display:grid;gap:22px}
.split__text p{font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.42;letter-spacing:-.012em;color:var(--ink-2);max-width:36ch;text-wrap:pretty}
.split__text p:first-child{color:var(--ink)}
/* an arch: round at the top, soft at the bottom */
.split__media{grid-column:8/span 5;aspect-ratio:4/5;border-radius:999px 999px var(--r-xl) var(--r-xl);overflow:hidden;background:var(--wash);box-shadow:var(--sh-3)}
.js .split__media[data-reveal="mask"]{clip-path:inset(16% 12% 10% 12% round 999px 999px var(--r-xl) var(--r-xl))}
.js .split__media[data-reveal="mask"].is-in{clip-path:inset(0 round 999px 999px var(--r-xl) var(--r-xl))}
.split__media img{width:100%;height:118%;object-fit:cover}
@media (max-width:820px){.split__text,.split__media{grid-column:1/-1}}

/* ------------------------------------------------------------------ closing call */
.cta{position:relative;isolation:isolate;margin:0 clamp(8px,1.4vw,22px) clamp(8px,1.4vw,22px);padding:clamp(52px,9vw,150px) clamp(18px,4vw,64px);border-radius:var(--r-xl);background:var(--accent);color:var(--ink);overflow:hidden}
.cta::before,.cta::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.cta::before{width:70vmax;height:70vmax;right:-30vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(255,196,120,.85),rgba(255,196,120,0) 70%)}
.cta::after{width:50vmax;height:50vmax;left:-20vmax;bottom:-30vmax;background:radial-gradient(closest-side,rgba(232,44,8,.6),rgba(232,44,8,0) 70%)}
.js .cta::before{animation:float1 17s ease-in-out infinite alternate}
.cta__in{display:grid;gap:clamp(24px,3.6vw,52px);justify-items:start}
.cta p{font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.38;max-width:40ch;text-wrap:pretty}
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
.cta__tel{font-weight:700;font-size:clamp(1.125rem,1.5vw,1.375rem);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:4px}
.cta ::selection{background:var(--ink);color:#fff}
.js.pin .cta{will-change:clip-path}

/* a line of words that runs along, and leans into the scroll */
.run{overflow:hidden;padding-block:clamp(28px,5vw,72px);white-space:nowrap;user-select:none}
.run__slide{will-change:transform}
.run__track{display:inline-flex;gap:0;will-change:transform}
.run__track span{font-size:clamp(3rem,11vw,10.5rem);font-weight:700;line-height:1;letter-spacing:-.05em;padding-right:.3em}
.run__track span:nth-child(even){color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.run__track span::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--accent);margin-left:.3em;vertical-align:.32em}
.js .run__track{animation:run 34s linear infinite;animation-play-state:paused}
.js .run.is-in .run__track{animation-play-state:running}
@keyframes run{to{transform:translate3d(-50%,0,0)}}

/* ------------------------------------------------------------------ footer: lies under the page */
.foot{position:relative;z-index:var(--z-under);background:var(--night);color:#fff;padding-top:clamp(56px,8vw,120px);overflow:clip}
.foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--r-xl) + 90px);background:var(--night)}
.foot::after{content:"";position:absolute;z-index:0;width:60vmax;height:60vmax;right:-22vmax;bottom:-34vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,74,28,.42),rgba(255,74,28,0) 70%);pointer-events:none}
.foot>.wrap{position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:36px clamp(16px,3vw,48px);padding-bottom:clamp(36px,6vw,88px)}
.foot__h{font-size:.8125rem;font-weight:700;color:rgba(255,255,255,.55);margin-bottom:12px}
.foot__grid ul{list-style:none;display:grid;gap:8px}
.foot__grid a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .3s var(--ease-out)}
.foot__lead{font-size:clamp(1.25rem,2.1vw,2rem);font-weight:700;line-height:1.1;letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.foot__where{margin-top:14px;max-width:28ch;font-size:.9375rem;line-height:1.4;color:rgba(255,255,255,.62)}
/* joining the email list, at the foot of every page. It needs scripts, so without them it is not shown. */
.foot__join{display:grid;gap:8px;max-width:400px;margin-top:clamp(20px,2.4vw,30px)}
.no-js .foot__join{display:none}
.foot__join>label{font-size:.9375rem;font-weight:700}
.foot__joinrow{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.foot__joinrow:focus-within{box-shadow:inset 0 0 0 1.5px #fff}
.foot__joinrow input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:#fff;font:inherit}
.foot__joinrow input::placeholder{color:rgba(255,255,255,.55)}
.foot__joinrow input:focus{outline:none}
.foot__joinrow button{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--accent);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:transform .16s var(--ease-out)}
.foot__joinrow button:active{transform:scale(.96)}
.foot__joinrow button[disabled]{opacity:.6}
.foot__joinsub{font-size:.8125rem;line-height:1.4;color:rgba(255,255,255,.62)}
.foot__joinsub a{display:inline;padding:0;text-decoration:underline;text-underline-offset:.2em;background:none}
.foot__join.is-done .foot__joinrow{display:none}
.foot__join.is-done .foot__joinsub{font-size:.9375rem;color:#fff;font-weight:700}
.foot__mark{display:block;font-size:clamp(3.5rem,17.6vw,21rem);font-weight:700;line-height:.8;letter-spacing:-.06em;white-space:nowrap;margin-left:-.04em;padding-bottom:.16em;text-decoration:none;clip-path:inset(-.12em -.1em 0)}
.foot__mark img{width:100%;height:auto;padding-bottom:4%}
.foot__mark .l{display:inline-block;will-change:transform}
/* the footer mark as the logo: it runs the full width, and each letter rises from below its own edge */
.foot__mark--logo{font-size:0;line-height:0;margin-left:0;padding-bottom:clamp(20px,3vw,46px);clip-path:none}
.foot__mark--logo .mark{width:100%;height:auto}
.foot__mark--logo .l{display:inline;will-change:auto}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:20px 26px;border-top:1px solid rgba(255,255,255,.16);font-size:.875rem;color:rgba(255,255,255,.62)}
@media (hover:hover) and (pointer:fine){.foot__grid a:hover{background-size:100% 1.5px}}
@media (max-width:820px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot__grid>div:first-child{grid-column:1/-1}}
.pin.foot-under .foot{position:fixed;left:0;right:0;bottom:0}
.pin.foot-under .page{margin-bottom:var(--foot-h,0px);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}

/* ------------------------------------------------------------------ forms, contact, portal */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px clamp(16px,2vw,32px);align-items:start}
.contact__direct{grid-column:1/span 5;display:grid;gap:26px;justify-items:start}
.contact__form{grid-column:7/span 6}
.tel{font-size:clamp(2.25rem,5.2vw,4.75rem);font-weight:700;line-height:.95;letter-spacing:-.05em;text-decoration:none;white-space:nowrap}
.plainlist{list-style:none;display:grid;gap:10px;color:var(--ink-2)}
.plainlist a{color:var(--ink);font-weight:700}
@media (max-width:900px){.contact__direct,.contact__form{grid-column:1/-1}}

.form{display:grid;gap:18px;padding:clamp(20px,2.6vw,40px);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-2),var(--edge)}
.field{position:relative;display:grid;gap:8px}
.field label{font-size:.9375rem;font-weight:700}
.field input,.field textarea{width:100%;min-height:58px;padding:16px 18px;border:1.5px solid transparent;border-radius:18px;background:var(--cream);font:inherit;color:inherit;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.field textarea{min-height:132px;resize:vertical;line-height:1.45}
.field input:focus,.field textarea:focus{outline:none;background:var(--paper);border-color:var(--ink);box-shadow:0 0 0 5px rgba(255,74,28,.16)}
.form__sub{font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.msg{font-size:.9375rem;line-height:1.45;color:var(--ink-2);min-height:1.45em}
.msg.err{color:var(--accent-ink);font-weight:700}
/* what the message will look like in WhatsApp, as it is typed */
.wa{display:grid;gap:8px;justify-items:end;padding:16px;border-radius:20px;background:var(--wash)}
.wa__label{justify-self:start;font-size:.8125rem;font-weight:700;color:var(--ink-3)}
.wa__bubble{max-width:92%;padding:.7em 1em;border-radius:1.2em;border-bottom-right-radius:.35em;background:var(--ink);color:#fff;font-size:.9375rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;transform-origin:100% 100%;transition:transform .3s var(--ease-pop)}
.wa__bubble.is-empty{opacity:.45}
.wa__bubble.bump{transform:scale(1.03)}
.no-js .wa{display:none}

.steps{position:relative;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.steps li{position:relative;counter-increment:s;display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,34px);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1),var(--edge)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:700}
.steps li h3{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.08;letter-spacing:-.035em}
.steps li p{color:var(--ink-2);max-width:34ch;text-wrap:pretty}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

.panel{display:grid;gap:12px;padding:clamp(20px,2.4vw,34px);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1),var(--edge)}
.panel h2,.panel h3{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.08;letter-spacing:-.035em}
.panel ul{list-style:none;display:grid;gap:8px;color:var(--ink-2)}
.panel .bank li{color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.0625rem}
.portal__login{max-width:520px}

/* ------------------------------------------------------------------ the client's own page, behind the login */
.textlink{border:0;padding:0;background:none;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.08em;cursor:pointer}
.pv-wrap{padding-bottom:var(--sect)}
#loginView{min-height:94vh}
.pv{display:grid;gap:clamp(14px,1.8vw,26px)}
.pv__in{opacity:0;transform:translate3d(0,26px,0)}
.pv__in.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .85s var(--ease-out)}
.pv__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(8px,1.4vw,20px)}
.pv__head .lede{margin-top:14px}
.pv__head h1:focus{outline:none}
.pv__acts{display:flex;align-items:center;gap:22px}
.pv__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(12px,1.4vw,22px)}
.ptile{display:grid;gap:6px;align-content:start;padding:clamp(18px,2.2vw,30px);border-radius:var(--r-l);background:var(--cream)}
.ptile span{font-size:.875rem;font-weight:700;color:var(--ink-2)}
.ptile b{font-size:clamp(2rem,3.6vw,3.25rem);line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ptile em{color:var(--ink-2);font-size:.9375rem}
.ptile--hot{background:var(--accent)}
.ptile--hot span,.ptile--hot em{color:var(--ink)}
.pv__cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.pv__main,.pv__side{display:grid;gap:clamp(14px,1.8vw,26px)}
@media (max-width:980px){.pv__cols{grid-template-columns:1fr}}
.pcard{display:grid;gap:16px;padding:clamp(18px,2.4vw,34px);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-2),var(--edge)}
.pcard--hot{background:var(--peach)}
.pcard__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.pcard h2{font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.05;letter-spacing:-.04em}
.pcard__sub{color:var(--ink-2);font-size:.9375rem;line-height:1.45}
.pcard__count{font-size:.875rem;font-weight:700;color:var(--ink-2)}
.pcard__owed{font-weight:700}
.plist{list-style:none;display:grid;gap:10px}
.post{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:14px;border-radius:22px;background:var(--paper);box-shadow:var(--edge)}
.plist--tight .post{background:var(--cream);box-shadow:none;padding:10px 14px}
.post__when{display:grid;place-items:center;align-content:center;gap:3px;width:54px;height:54px;border-radius:17px;background:var(--cream);line-height:1}
.pcard--hot .post__when{background:var(--peach)}
.plist--tight .post__when{background:var(--paper)}
.post__when b{font-size:1.25rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.post__when span{font-size:.6875rem;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.post__what{display:grid;gap:2px}
.post__what h3{font-size:1.0625rem;line-height:1.2;letter-spacing:-.015em}
.post__what p{color:var(--ink-2);font-size:.875rem;line-height:1.35}
.post__acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:4px}
@media (max-width:520px){.post{grid-template-columns:auto minmax(0,1fr)}.post__state{grid-column:2}}
.status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:.8125rem;font-weight:700;line-height:1.2;white-space:nowrap;background:var(--wash);color:var(--ink)}
.status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.status.s-hot{background:var(--accent);color:var(--ink)}
.status.s-ok{background:var(--ok-bg);color:var(--ok)}
.status.s-done{background:var(--wash);color:var(--ink-2)}
.status.s-warn{background:var(--warn-bg);color:var(--warn)}
.status.s-quiet{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
/* the month as a calendar: a dot for every post, the shoot day filled in */
/* the month as a calendar: a day with a post is filled with how that post stands, so it reads at a glance */
.cal{display:grid;gap:12px}
.cal__sum{display:flex;flex-wrap:wrap;gap:6px 8px;margin:-2px 0 2px}
.cal__sum:empty{display:none}
.cal__head,.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,.6vw,8px)}
.cal__head span{text-align:center;font-size:.75rem;font-weight:700;color:var(--ink-3)}
.cal__grid>*{position:relative;display:grid;align-content:space-between;justify-items:start;aspect-ratio:1;min-width:0;min-height:38px;padding:clamp(5px,.7vw,9px);border:0;border-radius:clamp(10px,1.2vw,16px);background:var(--cream);color:inherit;font:inherit;font-style:normal;text-align:left}
.cal__grid i:empty{background:none}
.cal__grid b{font-size:.8125rem;line-height:1;font-variant-numeric:tabular-nums}
.cal__grid em{font-style:normal;font-size:clamp(.625rem,.82vw,.75rem);font-weight:700;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.cal__grid i.is-past b{color:var(--ink-3)}
.cal__grid i.is-shoot{background:var(--peach)}
.cal__grid .is-today{outline:2.5px solid var(--ink);outline-offset:2px}
.cday{cursor:pointer;transition:transform .16s var(--ease-out)}
.cday:active{transform:scale(.95)}
.cday.s-hot{background:var(--accent);color:var(--ink)}
.cday.s-warn{background:var(--amber);color:var(--ink)}
.cday.s-ok{background:#15803d;color:#fff}
.cday.s-done{background:var(--ink);color:#fff}
.cday.s-quiet{background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2)}
.cday__mark{position:absolute;top:clamp(4px,.6vw,8px);right:clamp(4px,.6vw,8px);width:clamp(15px,2vw,22px);aspect-ratio:1}
.cal svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* the camera that marks a shoot day: top right on an empty day; beside the mark when the day has a post as well, so it never sits on the word */
.cday__cam{position:absolute;top:clamp(3px,.5vw,7px);right:clamp(3px,.5vw,7px);width:clamp(16px,2vw,22px);aspect-ratio:1;padding:3px;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
.cday .cday__cam{right:calc(clamp(15px,2vw,22px) + clamp(8px,1.1vw,15px))}
.cday__cam svg{stroke-width:2.2}
.cal__key{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.8125rem;color:var(--ink-2)}
.cal__key span{display:inline-flex;align-items:center;gap:7px}
.cal__key u{flex:none;width:20px;height:20px;padding:3px;border-radius:7px;text-decoration:none;background:var(--cream);color:var(--ink-2)}
.cal__key u.s-hot{background:var(--accent);color:var(--ink)}
.cal__key u.s-warn{background:var(--amber);color:var(--ink)}
.cal__key u.s-ok{background:#15803d;color:#fff}
.cal__key u.s-done{background:var(--ink);color:#fff}
.cal__key u.s-quiet{box-shadow:inset 0 0 0 1.5px var(--line)}
.cal__key u.k-shoot{background:var(--peach);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.cday:hover{transform:scale(1.04)}.cday:active{transform:scale(.95)}}
/* small screens: the squares are too small for a word, so the colour and the mark carry it */
@media (max-width:640px){
  .cal__grid em{display:none}
  .cday__mark{top:auto;bottom:4px;right:4px;width:15px}
  .cday__cam,.cday .cday__cam{top:auto;right:3px;bottom:3px;width:17px}
  .cday .cday__cam{right:auto;left:3px}
}
/* the post a day was pressed for is picked out for a moment */
.post.is-flash{animation:pflash 1.6s ease-out}
@keyframes pflash{0%,35%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px rgba(255,74,28,0)}}
.post__fail{flex-basis:100%;font-size:.875rem;font-weight:700;color:var(--warn)}
.pv__in .cal__grid>:not(:empty){opacity:0;transform:scale(.7)}
.pv__in.is-in .cal__grid>:not(:empty){opacity:1;transform:none;transition:opacity .3s ease calc(var(--n)*14ms + 200ms),transform .5s var(--ease-pop) calc(var(--n)*14ms + 200ms)}
.pmore summary{cursor:pointer;font-weight:700;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:6px 0}
.pmore summary::-webkit-details-marker{display:none}
.pmore summary::after{content:"\2193";transition:transform .25s var(--ease-out)}
.pmore[open] summary::after{transform:rotate(180deg)}
.pmore[open] summary{margin-bottom:10px}
.pfiles{list-style:none;display:grid}
.pfiles li{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;padding:13px 0;border-top:1px solid var(--line)}
.pfiles li:first-child{border-top:0;padding-top:0}
.pfiles li>div{display:grid;gap:2px;margin-right:auto}
.pfiles li span{color:var(--ink-2);font-size:.875rem}
.pfiles li .status{color:var(--ink-2)}
.pfiles li .status.s-hot,.pfiles li .status.s-warn,.pfiles li .status.s-ok{color:inherit}
.pfiles li .status.s-ok{color:var(--ok)}
.pfiles li .status.s-warn{color:var(--warn)}
.pnum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));gap:10px}
.pnum div{display:grid;gap:4px;align-content:start;padding:16px 18px;border-radius:22px;background:var(--cream);min-width:0}
.pnum span{font-size:.8125rem;font-weight:700;color:var(--ink-2)}
.pnum b{font-size:clamp(1.625rem,2.8vw,2.375rem);line-height:1;letter-spacing:-.045em}
.pnum em{font-style:normal;font-size:.8125rem;color:var(--ink-2)}
/* a monthly report, opened from "Your numbers" */
.rbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(16px,2.2vw,28px)}
.rbar__acts{display:flex;flex-wrap:wrap;gap:10px}
.pstats{display:grid;gap:clamp(12px,1.4vw,18px)}
.pstats .rstat:first-child{border-top:0;padding-top:0}
.pv .rstat__bars i{transform:scaleX(0)}
.pv .is-in .rstat__bars i{transform:none;transition:transform 1.2s var(--ease-out) .35s}
.ddbox,.bankbox{display:grid;gap:8px;justify-items:start;padding:16px 18px;border-radius:22px;background:var(--cream)}
.ddbox.is-on{background:var(--ok-bg);color:var(--ok)}
.ddbox span,.bankbox span{font-size:.9375rem;line-height:1.4}
.bankbox .bank{list-style:none;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;line-height:1.38}
.ticks li::before{content:"";position:absolute;left:0;top:.14em;width:20px;height:20px;border-radius:50%;background:var(--peach)}
.ticks li::after{content:"";position:absolute;left:6.5px;top:calc(.14em + 5px);width:7px;height:9px;border:solid var(--ink);border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}
@media (prefers-reduced-motion:reduce){
  .pv__in,.pv__in .cal__grid>:not(:empty){opacity:1;transform:none;transition:none}
  .cday,.cday:active{transition:none;transform:none}
  .pv .rstat__bars i{transform:none}
}

/* ------------------------------------------------------------------ legal pages */
.updated{margin-top:18px;font-size:.9375rem;color:var(--ink-3)}
.prose{max-width:68ch;display:grid;gap:16px;padding-bottom:var(--sect)}
.prose h2{margin-top:clamp(26px,3.4vw,46px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line);font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.05;letter-spacing:-.04em}
.prose p,.prose li{color:var(--ink-2);text-wrap:pretty}
.prose ul{display:grid;gap:10px;padding-left:1.15em}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--ink)}
.prose a{color:var(--ink);font-weight:700}

/* ------------------------------------------------------------------ small things */
.wcard__media picture,.split__media picture,.shot picture{width:100%;height:100%}
.pos-left{object-position:22% 50%}
.pos-top{object-position:50% 12%}
.pos-upper{object-position:50% 30%}
.pos-lower{object-position:50% 72%}
.no-js .film__play{display:none}
.rec{animation:rec 2.6s ease-in-out infinite}
@keyframes rec{50%{opacity:.4}}
.center-stack{display:grid;gap:24px;justify-items:start}
.row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
/* cards that lean toward the pointer */
.fine [data-tilt]{transition:transform .5s var(--ease-out);will-change:transform}
.fine [data-tilt].is-tilting{transition:transform .12s linear}

/* ------------------------------------------------------------------ reduced motion: keep the fades, drop the travel */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rec,.js .run__track,.js .glow i,.js .badge svg,.js .badge__mid,.js .cta::before,.film__play span::before{animation:none}
  /* less motion asked for: each picture is shown finished and still, and the film waits to be played */
  .g *,.g *::before,.g *::after{animation:none!important}
  .js .jscene__text>*,.js .jscene__art,.js .jscene.is-on .jscene__text>*,.js .jscene.is-on .jscene__art{transform:none}
  .js [data-split] .w__i,.js [data-reveal],.js [data-reveal="mask"]>*,.js [data-reveal="rule"]>*,.js [data-reveal="tilt"],.js [data-reveal="pop"],.menu li a{transform:none}
  .js [data-split] .w__i{opacity:0}
  .js [data-split].is-in .w__i{opacity:1;transition:opacity .5s ease}
  .js [data-split] .stop{transform:none}
  .js [data-reveal="mask"],.js .split__media[data-reveal="mask"]{clip-path:none;opacity:0}
  .js [data-reveal="mask"].is-in{opacity:1;transition:opacity .6s ease}
  .js [data-reveal="rule"]::before{transform:none}
  .js .plan li::before{transform:none}
  .js .mphone:not(.is-on) .mphone__grid i,.js .mphone:not(.is-on) .mping{opacity:1;transform:none}
  .js .mphone .mphone__body,.js .mphone:not(.is-on) .mphone__body{transform:rotate(-3deg);transition:none}
  .js .mphone.is-on .mphone__grid i,.js .mphone.is-on .mping{transition:none}
  .mping{animation:none}
  .js .plan li::after{transform:rotate(42deg)}
  .js .rstat__bars i{transform:none}
  .js .note .ico path,.js .note .ico circle,.js .note .ico rect{stroke-dashoffset:0}
  .curtain,.cursor{display:none!important}
  .menu{transition:visibility 0s linear .2s,opacity .2s ease;clip-path:none;opacity:0}
  .menu-open .menu{opacity:1;transition:opacity .2s ease}
  .btn,.btn i,.btn i::before,.btn i::after,.tier__go,.tier::before,.note,.faq__q i,.js .faq dd{transition:none}
}

@media print{
  .nav,.menu,.curtain,.cursor,.run,.reel,.badge{display:none}
  /* printing a monthly report from the client login: the report and nothing else */
  .has-report .foot,.has-report .rbar,.has-report .skip,.has-report .glow{display:none!important}
  .has-report .top{padding:0!important;min-height:0!important}
  .has-report .wrap{max-width:none!important;padding:0!important}
  .has-report .page{background:none!important;box-shadow:none!important;margin:0!important}
  .js [data-reveal],.js [data-split] .w__i,.js [data-reveal="rule"]>*{opacity:1!important;transform:none!important}
  .js [data-split]{visibility:visible!important}
  .foot{position:static!important}
}