/* The live products and the captions beside them. */
.products { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: clip; }
.product { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; visibility: hidden; pointer-events: none; will-change: transform; backface-visibility: hidden; }

.cap { position: absolute; z-index: 4; top: calc((100% - var(--tabs)) / 2 + 22px); translate: 0 -50%; width: min(26.5vw, 460px); opacity: 0; visibility: hidden; color: var(--fg); pointer-events: none; }
.cap--l { left: var(--gutter); }
.cap--r { right: var(--gutter); }
.cap .cap__t { font-size: clamp(32px, 3.5vw, 60px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.cap p { margin-top: 18px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.42; letter-spacing: -.012em; font-weight: 450; text-wrap: pretty; }
.cap small { display: block; margin-top: 16px; font-size: 13px; line-height: 1.4; opacity: .78; }

.dim { position: absolute; inset: 0; z-index: 99999; opacity: 0; pointer-events: none; background: #06070B; }

/* Kettlebird: its own brand, on purpose nothing like Pococode's */
.kb { --cream: #F6EFE4; --roast: #2A1A12; --clay: #C8502A; --sun: #E9A93B; background: var(--cream); color: var(--roast); font-family: Geist, system-ui, sans-serif; font-size: 16px; container-type: inline-size; }
.kb .kb-h3, .kb .kb-h4, .kb-nav b, .kb-foot b { font-family: Fraunces, Georgia, serif; font-optical-sizing: auto; font-weight: 500; }
.kb-nav { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 28px; height: 62px; padding: 0 28px; background: var(--cream); box-shadow: 0 1px 0 rgb(42 26 18 / .1); }
.kb-nav b { font-size: 25px; letter-spacing: -.03em; margin-right: auto; }
.kb-nav nav { display: flex; gap: 24px; font-size: 14.5px; } .kb-nav a { cursor: pointer; }
.kb-tag { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; }
.kb-cart { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }
.kb-cart i { font-style: normal; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--roast); color: var(--cream); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kb-page { will-change: transform; padding-top: 62px; }
.kb-hero { position: relative; height: 660px; overflow: hidden; background: var(--clay); color: var(--cream); padding: 38px 28px 28px; }
.kb-sun { position: absolute; right: 96px; top: 58px; width: 470px; height: 470px; border-radius: 50%; background: var(--sun); }
.kb-hero .kb-h3 { position: relative; z-index: 2; font-size: 128px; line-height: .93; letter-spacing: -.045em; max-width: 700px; }
.kb-hero__foot { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; display: flex; align-items: flex-end; gap: 28px; }
.kb-hero__foot p { max-width: 34ch; font-size: 19px; line-height: 1.32; }
.kb-hero__foot button, .kb-find button, .kb-add { font-weight: 500; border-radius: 999px; transition: background .25s, color .25s, transform .35s var(--out); }
.kb-hero__foot button { padding: 15px 24px; background: var(--cream); color: var(--roast); font-size: 16px; }
.kb-hero__foot button:hover { transform: translateY(-2px); }
.kb-hero__bag { position: absolute; right: 118px; top: 44px; z-index: 3; width: 408px; perspective: 900px; }
.kb-hero__bag .kb-bag { display: block; width: 100%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-6deg); transition: transform .5s var(--out); filter: drop-shadow(0 40px 34px rgb(42 26 18 / .45)); }
.kb-run { display: flex; gap: 46px; padding: 16px 28px; white-space: nowrap; overflow: hidden; background: var(--roast); color: var(--cream); font-family: Fraunces, serif; font-size: 22px; letter-spacing: -.02em; }
.kb-coffee { padding: 60px 28px 40px; }
.kb .kb-h4 { font-size: 58px; line-height: 1; letter-spacing: -.035em; }
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.kb-shelf { display: grid; place-items: center; height: 290px; border-radius: 14px; background: color-mix(in srgb, var(--c) 16%, var(--cream)); }
.kb-shelf .kb-bag { height: 86%; filter: drop-shadow(0 18px 14px rgb(42 26 18 / .3)); transition: transform .5s var(--out); }
.kb-grid article:hover .kb-bag { transform: translateY(-6px) rotate(-2deg); }
.kb-grid header { display: flex; justify-content: space-between; align-items: baseline; margin-top: 13px; }
.kb-grid header b { font-family: Fraunces, serif; font-weight: 500; font-size: 27px; letter-spacing: -.03em; } .kb-grid header span { font-size: 14px; opacity: .7; }
.kb-grid p { margin-top: 3px; font-size: 15px; opacity: .78; }
.kb-grid footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.kb-grid em { font-style: normal; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kb-add { padding: 10px 16px; background: var(--roast); color: var(--cream); font-size: 14px; }
.kb-add:hover { background: var(--clay); } .kb-add.on { background: transparent; color: var(--roast); box-shadow: inset 0 0 0 1.5px var(--roast); }
.kb-find { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 56px 28px; background: var(--roast); color: var(--cream); }
.kb-opts { display: grid; gap: 8px; margin-top: 26px; justify-items: start; }
.kb-opts button { padding: 13px 20px; font-size: 18px; box-shadow: inset 0 0 0 1.5px rgb(246 239 228 / .3); }
.kb-opts button:hover { box-shadow: inset 0 0 0 1.5px var(--cream); } .kb-opts button.on { background: var(--cream); color: var(--roast); }
.kb-pick { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; }
.kb-pick .kb-shelf { height: 280px; background: color-mix(in srgb, var(--c) 42%, var(--roast)); }
.kb-pick small { font-size: 14px; opacity: .7; } .kb-pick b { display: block; font-family: Fraunces, serif; font-weight: 500; font-size: 44px; letter-spacing: -.03em; line-height: 1.05; }
.kb-pick p { margin: 8px 0 16px; font-size: 16px; line-height: 1.38; opacity: .86; }
.kb-pick .kb-add { background: var(--cream); color: var(--roast); } .kb-pick .kb-add:hover { background: var(--sun); } .kb-pick .kb-add.on { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream); }
.kb-visit { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 56px 28px; }
.kb-visit p { margin-top: 12px; font-size: 19px; }
.kb-visit dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 22px; margin-top: 18px; font-size: 15.5px; font-variant-numeric: tabular-nums; } .kb-visit dd { margin: 0; opacity: .75; }
.kb-visit strong { display: inline-block; margin-top: 18px; padding: 7px 13px; border-radius: 999px; background: var(--clay); color: var(--cream); font-size: 14px; font-weight: 500; }
.kb-map { width: 100%; display: block; border-radius: 14px; }
.kb-foot { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 28px; background: var(--clay); color: var(--cream); font-size: 14px; } .kb-foot b { font-size: 30px; letter-spacing: -.03em; }
@container (max-width: 700px) {
  .kb-hero { height: 560px; padding: 84px 18px 18px; } .kb-hero .kb-h3 { font-size: 66px; } .kb-sun { right: -60px; top: 230px; width: 300px; height: 300px; }
  .kb-hero__bag { right: 8px; top: 262px; width: 200px; } .kb-hero__foot { left: 18px; right: 18px; bottom: 18px; flex-direction: column; align-items: flex-start; gap: 12px; } .kb-hero__foot p { font-size: 16px; max-width: 24ch; }
  .kb-nav { padding: 14px 18px; gap: 14px; } .kb-nav nav { display: none; } .kb-nav b { font-size: 21px; }
  .kb-coffee, .kb-find, .kb-visit { padding: 34px 18px; } .kb .kb-h4 { font-size: 38px; } .kb-grid, .kb-find, .kb-visit { grid-template-columns: 1fr; } .kb-pick { grid-template-columns: 120px 1fr; } .kb-pick .kb-shelf { height: 170px; } .kb-pick b { font-size: 30px; }
  .kb-shelf { height: 220px; }
}

/* Phones: the product is a card under a short caption */
@media (max-width: 899px) {
  .cap { top: 72px; translate: none; left: 16px !important; right: 16px !important; width: auto; }
  .cap .cap__t { font-size: clamp(26px, 7.6vw, 40px); } .cap p { margin-top: 8px; font-size: 15px; line-height: 1.36; } .cap small { margin-top: 6px; font-size: 12px; }
}

/* Small labels the products gained */
.a-tag { margin-left: auto; font-size: 12px; font-weight: 500; color: #0F7C70; background: rgb(15 156 140 / .1); padding: 4px 10px; border-radius: 999px; }
.a-tag + .a-seg { margin-left: 0; }
.r-island { position: absolute; left: 50%; translate: -50% 0; top: 11px; width: 104px; height: 30px; border-radius: 16px; background: #000; z-index: 3; }

/* Comet Catch */
.g-hud { position: absolute; inset: 0; z-index: 3; visibility: hidden; color: #fff; pointer-events: none; }
.g-top { position: absolute; left: 0; right: 0; top: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 0 var(--gutter); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; }
.g-hud.live .g-top { opacity: 1; }
.g-score { display: flex; align-items: baseline; gap: 10px; } .g-score b { font-size: clamp(54px, 7vw, 112px); font-weight: 600; letter-spacing: -.05em; line-height: .9; } .g-score small { font-size: 15px; opacity: .7; }
.g-lv { font-size: 16px; font-weight: 500; opacity: .86; } .g-lv b { font-weight: 600; }
.g-score { justify-self: center; grid-column: 2; grid-row: 1; flex-direction: column; align-items: center; gap: 0; } .g-lv { grid-column: 1; grid-row: 1; padding-top: 6px; }
.g-lives { justify-self: end; grid-column: 3; grid-row: 1; padding-top: 8px; display: flex; gap: 8px; } .g-lives i { width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: opacity .3s, scale .4s var(--out); } .g-lives i.off { opacity: .2; scale: .7; }
.g-flash { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: clamp(50px, 7vw, 110px); font-weight: 600; letter-spacing: -.05em; visibility: hidden; opacity: 0; }
.g-start { position: absolute; right: var(--gutter); top: calc((100% - var(--tabs)) / 2 + 22px); translate: 0 -50%; width: min(34vw, 520px); display: grid; justify-items: start; gap: 12px; transition: opacity .3s, transform .5s var(--out); }
.g-start.off { opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden; }
.g-start .g-start__t { font-size: clamp(50px, 6.6vw, 112px); font-weight: 600; letter-spacing: -.05em; line-height: .94; }
.g-start p { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.4; max-width: 34ch; opacity: .84; text-wrap: pretty; }
.g-start button { margin-top: 6px; padding: 15px 34px; border-radius: 999px; background: #fff; color: #0E1013; font-size: 17px; font-weight: 600; pointer-events: auto; transition: transform .35s var(--out); }
.g-start button:hover { transform: scale(1.05); } .g-start small { font-size: 13px; opacity: .6; font-variant-numeric: tabular-nums; }
.g-hud:not(.reach) button { pointer-events: none; }

/* Enquiry helper: the faces are glued to the slabs of the flow */
.ai { position: absolute; inset: 0; overflow: visible; background: none; pointer-events: none; will-change: auto; }
.ai-face { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #FFFEFA; color: #15161A; display: flex; flex-direction: column; }
.ai-mail { width: 350px; height: 380px; padding: 20px; gap: 14px; }
.ai-mail header { display: flex; align-items: center; gap: 11px; } .ai-mail header span:nth-child(2) { flex: 1; min-width: 0; }
.ai-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #0E1013; color: #FFC800; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.ai-mail b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .ai-mail small { font-size: 13.5px; color: #5C5F68; }
.ai-mail em { font-style: normal; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: #FFF1B8; color: #5A4500; }
.ai-mail p { font-size: 17px; line-height: 1.42; letter-spacing: -.012em; }
.ai-mail footer { margin-top: auto; display: grid; gap: 6px; } .ai-fact { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; box-shadow: 0 -1px 0 rgb(14 16 19 / .09); } .ai-fact small { font-size: 13.5px; } .ai-fact b { display: inline; font-size: 15px; }
.ai-mail mark { background: linear-gradient(#FFD84D, #FFD84D) no-repeat 0 100% / 0 100%; color: inherit; padding: 1px 2px; margin: -1px -2px; border-radius: 4px; transition: background-size .5s var(--out); }
.ai-mail mark.on { background-size: 100% 100%; }
.ai-draft { width: 510px; height: 350px; padding: 18px 22px; }
.ai-draft header { display: flex; justify-content: space-between; align-items: baseline; } .ai-draft header b { font-size: 16px; font-weight: 600; } .ai-draft header small { font-size: 13.5px; color: #5C5F68; }
.ai-draft p { flex: 1; margin-top: 12px; font-size: 21px; line-height: 1.34; letter-spacing: -.018em; font-weight: 450; }
.ai-draft footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ai-draft footer small { font-size: 14px; color: #5C5F68; }
.ai-draft button { padding: 12px 22px; border-radius: 999px; background: #0E1013; color: #fff; font-size: 15.5px; font-weight: 600; pointer-events: auto; transition: transform .3s var(--out), opacity .3s, background .3s; }
.ai-draft button:disabled { opacity: .28; cursor: default; } .ai-draft button:not(:disabled):hover { transform: scale(1.05); background: #0A5CFF; }
.ai-act { width: 510px; height: 130px; padding: 0 22px; justify-content: center; gap: 2px; transition: background .4s; }
.ai-act b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; } .ai-act small { font-size: 14.5px; color: #5C5F68; } .ai-act.done { background: #EAF9EE; }
.ai-chip { position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #0E1013; white-space: nowrap; pointer-events: none; }

/* Kelpline's controls */
.b-kit { margin-top: 22px; pointer-events: auto; }
.b-sw { display: grid; gap: 4px; } .b-sw button { display: flex; align-items: center; gap: 11px; font-size: 15px; opacity: .72; transition: opacity .25s; pointer-events: auto; }
.b-sw button:hover, .b-sw button.on { opacity: 1; } .b-sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--bg), 0 0 0 0 #fff; transition: box-shadow .3s; } .b-sw .on i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #fff; }
/* Four directions, each tile set in its own colours and its own wordmark, so the choice reads before you click. */
.b-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 430px; }
.b-dir { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; padding: 13px 14px 12px; border-radius: 16px; background: var(--m); color: var(--i); text-align: left; pointer-events: auto; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 10px 24px -14px rgb(0 0 0 / .7); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.b-dir:hover { transform: translateY(-3px); }
.b-dir.on { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 0 0 2px #0E1013, 0 0 0 4.5px #fff; }
.b-dir:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.b-dir__w { display: block; max-width: 100%; height: 27px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.b-dir b { margin-top: 12px; font: 600 11px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.b-dir small { margin-top: 5px; font-size: 12.5px; line-height: 1.25; opacity: .82; }
/* The tour: the next card lifts and fills like a timer, then the brand rebuilds in it. The arrow moves only while it runs. */
.cap .b-ask { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 11px/1 "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.b-ask svg { flex: none; } .b-kit.tour .b-ask svg { animation: b-bob 1.4s ease-in-out infinite; }
@keyframes b-bob { 50% { transform: translateY(3px); } }
.b-dir::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 3px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, var(--i) 0 calc(var(--fill, 0) * 100%), color-mix(in srgb, var(--i) 26%, transparent) 0); }
.b-dir.next { transform: translateY(-3px); } .b-dir.next::after { opacity: 1; }
.b-type { margin-top: 20px; } .b-type b { display: block; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(40px, 3.8vw, 62px); line-height: 1; letter-spacing: -.02em; } .b-type small { margin-top: 6px; }
/* Short laptop screens: the specimen steps down and its font line goes, so the caption clears the menu above and the scroll cue below. */
@media (min-width: 900px) and (max-height: 820px) { .b-type { margin-top: 14px; } .b-type b { font-size: clamp(34px, 2.9vw, 46px); } .b-type small { display: none; } }

/* The campaign */
.mk { position: absolute; inset: 0; overflow: visible; background: none; will-change: auto; pointer-events: none; }
.m-face { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; backface-visibility: hidden; visibility: hidden; }
.m-face { container-type: inline-size; } .mk:not(.mk--flat) .m-face { will-change: transform; }
.m { --lemon: #FFDD33; --roast: #140C08; --cream: #F6ECDC; --photo: url(../assets/beans.webp); --veil: linear-gradient(90deg, rgb(20 12 8 / .55), rgb(20 12 8 / .2)); position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; font-family: Geist, sans-serif; color: var(--roast); } .m p, .m b { margin: 0; } .m small { font-size: inherit; }
.m-logo { font-family: var(--lf, Fraunces), serif; font-weight: var(--lw, 500); letter-spacing: var(--ls, -.03em); text-transform: var(--lt, none); }
.m-poster { font-family: var(--pf, Anton), Impact, sans-serif; font-weight: 400; color: var(--poster, var(--lemon)); } .m-poster span { display: block; line-height: 1.12; white-space: nowrap; }
.m-face--bill .m { font-size: 1.19cqw; } .m-face--post .m { font-size: 2.174cqw; } .m-face--story .m { font-size: 3.125cqw; } .m-face--mail .m { font-size: 2cqw; } .m-face--ad .m { font-size: 1.786cqw; }

.m-bill { flex-direction: row; }
.m-left { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 2.4em 2.6em 1.8em; gap: 1.2em; background: var(--veil), var(--roast) var(--photo) var(--photo-at, center) / cover; } .m-left .m-poster { flex: 1; min-height: 0; }
.m-left footer { display: flex; align-items: baseline; gap: 1.4em; color: var(--cream); font-size: 1.9em; } .m-left .m-logo { font-size: 1.7em; } .m-left small { opacity: .86; }
.m-bill aside { position: relative; flex: 0 0 33%; min-width: 0; display: flex; flex-direction: column; padding: 2.4em 2em; background: var(--lemon); font-family: var(--af, Anton), Impact, sans-serif; text-transform: var(--at, uppercase); } .m-bill aside small { font-size: 2.3em; line-height: 1.3; } .m-bill aside b { font-weight: 400; font-size: 6.6em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The lower part of this panel is drawn in the 3D layer, so the beans can burst out in front of it. */
.mk--pour .m-bill aside { clip-path: inset(0 0 30% 0); }
.mk:not(.mk--pour) .m-bill aside::after { content: attr(data-cta); margin-top: auto; padding: .7em; border-radius: 99em; background: var(--roast); color: var(--cream); font: 600 2.2em/1.2 Geist, sans-serif; text-align: center; text-transform: none; }

.m-post { background: #fff; } .m-post header { display: flex; align-items: center; gap: .9em; padding: 1.2em 1.5em; font-size: 1.5em; } .m-post header i { width: 2em; height: 2em; border-radius: 50%; background: var(--roast); } .m-post header span { margin-left: auto; font-size: .84em; opacity: .6; }
.m-card { position: relative; flex: 1; min-height: 0; pointer-events: auto; touch-action: pan-y; cursor: crosshair; background: var(--roast) var(--photo) var(--photo-at, center) / cover; }
.m-under { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 2.2em; gap: .8em; background: var(--veil); } .m-under .m-poster { flex: 1; min-height: 0; } .m-under small { color: var(--cream); font-size: 2em; font-weight: 500; } .m-under small b { font-weight: 700; }
.m-foil, .m-flecks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .m-foil { pointer-events: auto; transition: opacity .35s; } .m-card.open .m-foil { opacity: 0; }
.m-post footer { padding: 1em 1.5em; font-size: 1.5em; }
/* The hand-over: once the card has scratched its own top half, a coin in the brand's colour drops onto the rest and rubs
   at it, with a line in the brand's voice. Over the foil the coin follows the cursor or finger, and it flips away when
   the payoff shows. */
.m-coin { position: absolute; left: 80%; top: 74%; z-index: 3; width: 7em; height: 7em; margin: -3.5em 0 0 -3.5em; display: grid; place-items: center; border-radius: 50%; pointer-events: none; color: var(--roast);
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .8), transparent 38%), radial-gradient(circle, var(--lemon) 0 56%, color-mix(in srgb, var(--lemon), #000 32%) 58% 61%, var(--lemon) 63%, color-mix(in srgb, var(--lemon), #000 42%) 100%);
  box-shadow: 0 .6em 1.4em rgb(0 0 0 / .38), inset 0 -.35em .5em rgb(0 0 0 / .16);
  opacity: 0; transform: translateY(-4em) rotate(-60deg) scale(.6); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1), left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1); }
.m-coin b { font: 400 3.6em/1 var(--pf, Anton), Impact, sans-serif; }
.m-card.turn .m-coin { opacity: 1; transform: rotate(-14deg); animation: m-rub 2.4s .9s ease-in-out infinite; }
.m-card.held .m-coin { left: var(--cx); top: var(--cy); transform: rotate(-14deg) scale(1.08); transition: opacity .3s, transform .2s; animation: none; }
.m-card.turn.held:not(.open) .m-foil { cursor: none; }
.m-card.open .m-coin { opacity: 0; transform: translateY(-7em) rotate(340deg) scale(.5); animation: none; transition: opacity .45s .2s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.m-turn { position: absolute; right: 27%; top: 74%; z-index: 3; padding: .55em .95em; border-radius: 99em; background: var(--roast); color: var(--cream); font: 600 1.9em/1 Geist, sans-serif; letter-spacing: -.01em; white-space: nowrap; pointer-events: none; box-shadow: 0 .3em 1em rgb(0 0 0 / .25);
  opacity: 0; transform: translateY(-50%) scale(.8); transform-origin: 100% 50%; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.m-card.turn .m-turn { opacity: 1; transform: translateY(-50%); transition-delay: .3s; }
.m-card.held .m-turn, .m-card.open .m-turn { opacity: 0; transform: translateY(-50%) scale(.9); transition-delay: 0s; }
/* On a phone the post is a small tile, so the coin grows to a thumb's size and the line wraps beside it. */
.m-turn b { font-weight: inherit; }
.mk--flat .m-coin { top: 62%; font-size: 1.5em; }
.mk--flat .m-turn { top: 62%; right: 34%; font-size: 2.6em; line-height: 1.2; border-radius: .9em; }
.mk--flat .m-turn b { display: block; }
@keyframes m-rub { 0%, 44%, 100% { transform: rotate(-14deg); } 50% { transform: translateX(-1.4em) rotate(-26deg); } 56% { transform: translateX(1em) rotate(-4deg); } 62% { transform: translateX(-1.2em) rotate(-24deg); } 68% { transform: translateX(.7em) rotate(-8deg); } 76% { transform: rotate(-14deg); } }

.m-story { background: #000; }
.m-bars { position: absolute; z-index: 2; left: 1.4em; right: 1.4em; top: 1.6em; display: flex; gap: .5em; } .m-bars i { flex: 1; height: .3em; border-radius: .2em; background: rgb(255 255 255 / .34); overflow: hidden; } .m-bars u { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; text-decoration: none; }
.st { position: absolute; inset: 0; display: flex; flex-direction: column; visibility: hidden; font-family: Anton, Impact, sans-serif; text-transform: uppercase; } .st.on { visibility: inherit; }
.st1 { align-items: center; justify-content: center; background: var(--roast); color: var(--lemon); } .st1 small { font-size: 4em; } .st1 b { font-weight: 400; font-size: 25em; line-height: 1.1; }
.st2 { justify-content: center; padding: 0 1.6em; background: var(--veil), var(--roast) var(--photo) var(--photo-at, center) / cover; } .m-word { color: var(--lemon); font-size: 1em; text-align: center; } .m-word b { display: block; font-weight: 400; line-height: 1.12; white-space: nowrap; } .m-word.m-poster { height: 76%; flex: none; }
.st3 { padding: 5.4em 2em 2em; background: var(--lemon); color: var(--roast); } .st3 small { font-size: 3em; line-height: 1.25; } .st3 > b:not(.m-logo) { font-weight: 400; font-size: 8.4em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; } .st3 .m-logo { margin-top: auto; font-size: 3.2em; text-transform: none; } .st3 button { margin-top: 1em; padding: .8em; border-radius: 99em; background: var(--roast); color: var(--cream); font: 600 1.6em/1.2 Geist, sans-serif; cursor: default; }

.m-mail { background: var(--cream); padding: 1.8em 2.2em 0; } .m-mail header { display: flex; justify-content: space-between; font-size: 1.5em; opacity: .7; padding-bottom: .7em; } .m-mail .m-poster { flex: 0 0 31%; color: var(--roast); }
.m-letter { position: relative; flex: 1; min-height: 0; overflow: hidden; margin-top: .6em; font-size: 2.05em; line-height: 1.34; } .m-letter p { margin: 0 0 .7em; } .m-letter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(180deg, transparent, var(--cream)); }

.m-ad { background: #fff; padding: 2em 2.6em; gap: 1.1em; color: #1F2024; }
.m-q { display: flex; align-items: center; gap: .7em; padding: .62em 1em; border-radius: 99em; box-shadow: 0 .05em .5em rgb(0 0 0 / .2); font-size: 2.2em; } .m-q svg { width: 1em; height: 1em; opacity: .6; flex: none; } .m-q span { min-height: 1.2em; } .m-q i { width: .08em; height: 1.1em; background: #1A47B8; animation: m-caret 1s steps(2) infinite; } .m-ad.done .m-q i { visibility: hidden; }
@keyframes m-caret { 50% { opacity: 0; } }
.m-dym { font-size: 2.2em; line-height: 1.3; transition: opacity .3s; } .m-dym u { color: #1A47B8; background: #FFEFA0; text-decoration: none; box-shadow: 0 .08em 0 #1A47B8; } .m-ad:not(.done) .m-dym, .m-ad:not(.done) .m-res { opacity: 0; } .m-res { display: flex; flex-direction: column; gap: .3em; transition: opacity .3s .15s; } .m-res small { font-size: 1.6em; opacity: .75; } .m-res [data-idea] { font-size: 3.3em; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: #1A47B8; } .m-res p { font-size: 1.8em; opacity: .8; }
.m-input { margin-top: 22px; pointer-events: auto; } .m-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.m-input input { width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: rgb(255 255 255 / .92); color: #0E1013; font: 500 17px/1.2 Geist, sans-serif; letter-spacing: -.012em; caret-color: #0A5CFF; box-shadow: 0 10px 24px -14px rgb(0 0 0 / .5); }
.m-input input:focus { outline: 2.5px solid #0E1013; outline-offset: 2px; }
.m-try__label { margin: 16px 0 0; font: 600 11px/1 "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.m-try { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.m-try button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px 0 13px; border-radius: 99px; font-size: 15px; font-weight: 600; background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1.5px currentColor; pointer-events: auto; transition: background .2s, color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.m-try button svg { width: 17px; height: 17px; flex: none; }
.m-try.nudge button:not(.on) { animation: m-nudge 1.3s cubic-bezier(.2, .8, .2, 1) both; } .m-try.nudge button:not(.on) ~ button:not(.on) { animation-delay: .45s; }
@keyframes m-nudge { 0% { transform: none; } 28% { transform: translateY(-4px) scale(1.07); background: #0E1013; color: #fff; box-shadow: 0 0 0 7px rgb(14 16 19 / .16); } 62% { background: #0E1013; color: #fff; box-shadow: 0 0 0 14px rgb(14 16 19 / 0); } 100% { transform: none; } }
.m-try button:hover:not(.on) { background: rgb(14 16 19 / .1); transform: translateY(-1px); } .m-try button.on { background: #0E1013; color: #fff; box-shadow: none; }
.m-try button:focus-visible { outline: 2.5px solid #0E1013; outline-offset: 2px; }

@media (max-width: 899px) {
  .g-top { top: 60px; padding: 0 16px; } .g-start { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(var(--tabs) + 22px); translate: none; }
  .ai--flat { position: absolute; inset: auto; display: flex; flex-direction: column; gap: 8px; background: none; overflow: hidden; }
  .ai--flat .ai-face { position: relative; width: 100%; height: auto; border-radius: 16px; padding: 14px 16px; } .ai--flat .ai-draft p { min-height: 120px; font-size: 18px; flex: none; } .ai--flat .ai-mail p { font-size: 15px; } .ai--flat .ai-act b { font-size: 16px; }
  .mk--flat { position: absolute; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; } .mk--flat .m-face { position: relative; visibility: inherit; width: 100% !important; height: auto !important; aspect-ratio: 1; border-radius: 14px; } .mk--flat .m-face:first-child { grid-column: span 2; aspect-ratio: 2; }
  .mk--flat .st1 small { font-size: 3em; } .mk--flat .st1 b { font-size: 15em; } .mk--flat .st3 { padding: 3.6em 1.8em 1.6em; } .mk--flat .st3 small { font-size: 2.4em; } .mk--flat .st3 > b:not(.m-logo) { font-size: 6.8em; } .mk--flat .st3 .m-logo { display: none; } .mk--flat .st3 button { margin-top: auto; } .mk--flat .m-word.m-poster { height: 84%; }
  .cap .b-ask { margin-bottom: 8px; font-size: 10px; } .b-dir::after { left: 8px; right: 8px; bottom: 4px; height: 2.5px; }
  .m-input { margin-top: 10px; } .m-input label, .m-try__label { display: none; } .m-try { margin-top: 8px; } .m-try button { height: 34px; font-size: 13.5px; padding: 0 12px 0 10px; } .m-try button svg { width: 15px; height: 15px; } .m-input input { padding: 11px 13px; font-size: 16px; } .cap .b-kit { margin-top: 10px; } .b-dirs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .b-dir { padding: 9px 8px; border-radius: 12px; } .b-dir__w { height: 18px; font-size: 13px !important; letter-spacing: 0 !important; } .b-dir b { margin-top: 7px; font-size: 9.5px; } .b-dir small { display: none; } .b-sw { grid-auto-flow: column; justify-content: start; gap: 10px; } .b-sw span, .b-type { display: none; }
}

.g-note { display: none; }
@media (max-width: 899px) {
  .g-start { top: 84px; bottom: auto; } .g-note { display: block; } .g-top { top: 72px; }
  .ai--flat .ai-mail footer { display: none; } .ai--flat .ai-draft p { min-height: 92px; margin-top: 8px; font-size: 17px; } .ai--flat .ai-mail { gap: 8px; }
}

.g-row { position: absolute; left: 50%; top: 78px; translate: -50% 0; display: grid; justify-items: center; opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.g-row.on { opacity: 1; } .g-hud.live .g-row { opacity: 0; }
.g-row b { display: block; font-size: clamp(54px, 7vw, 112px); font-weight: 600; letter-spacing: -.05em; line-height: .9; } .g-row small { font-size: 15px; opacity: .7; }

/* How we work: the steps ride on the cable, so they sway with it. */
.hw { position: absolute; inset: 0; color: #0E1013; visibility: hidden; }
.hw .hw__t { position: absolute; left: var(--gutter); top: 15vh; font-size: clamp(38px, 5vw, 86px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.hw ol { list-style: none; }
.hw-step { position: absolute; left: 0; top: 0; width: 21vw; padding-top: 34px; will-change: transform; }
.hw-step > * { transition: opacity .5s ease, translate .6s cubic-bezier(.2, .8, .2, 1); opacity: .34; translate: 0 8px; }
.hw-step.on > * { opacity: 1; translate: 0 0; }
.hw-step small { display: block; font-family: "Geist Mono", monospace; font-size: 13px; }
.hw-step .hw-step__t { margin-top: 8px; font-size: clamp(24px, 2.5vw, 42px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.hw-step p { margin-top: 10px; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
@media (max-width: 899px) {
  .hw .hw__t { top: 84px; left: 48px; font-size: clamp(32px, 9vw, 44px); }
  .hw-step { width: calc(100vw - 72px); padding-top: 0; margin-left: 28px; }
  .hw-step small { display: none; } .hw-step .hw-step__t { margin-top: 0; font-size: 22px; } .hw-step p { margin-top: 4px; font-size: 15px; line-height: 1.32; }
}

/* ---- Each business has its own colours, photo and type ---- */
.mk[data-c="gym"] .m { --lemon: #D6FF3D; --roast: #0B0B0C; --cream: #F2F2EE; --photo: url(../assets/gym.webp); --photo-at: center 60%; --veil: linear-gradient(90deg, rgb(8 8 9 / .72), rgb(8 8 9 / .25)); --lf: Geist, sans-serif; --lw: 800; --ls: .14em; --lt: uppercase; }
.mk[data-c="skin"] .m { --lemon: #F3C9A6; --roast: #173A2C; --cream: #FBF4EC; --poster: #173A2C; --photo: url(../assets/serum.webp); --photo-at: center 46%; --veil: linear-gradient(90deg, rgb(251 244 236 / .78), rgb(251 244 236 / .1)); --pf: "Instrument Serif"; --af: "Instrument Serif"; --at: none; --lf: "Instrument Serif"; --lw: 400; --ls: 0; }
.mk[data-c="skin"] .m-left footer, .mk[data-c="skin"] .m-under small { color: var(--roast); }
.mk[data-c="skin"] .m-bill aside b, .mk[data-c="skin"] .st3 > b:not(.m-logo) { letter-spacing: -.02em; }
.mk[data-c="skin"] .st1 { color: var(--lemon); } .mk[data-c="skin"] .st2 .m-word { color: var(--roast); }

/* ---- Search, local: a map listing with the business pinned on top ---- */
.m-map, .m-shop { background: #fff; padding: 1.5em 1.8em; gap: .85em; color: #1F2024; }
.m-chart { position: relative; flex: 0 0 29%; border-radius: 1em; overflow: hidden; background: #ECF1F4; }
.m-streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-pin { position: absolute; width: 1.2em; height: 1.2em; margin: -.6em 0 0 -.6em; border-radius: 50%; background: #9AA3AD; box-shadow: 0 0 0 .25em #fff; }
.m-pin--us { width: auto; height: auto; margin: 0; background: none; box-shadow: none; display: flex; align-items: center; gap: .5em; transform: translate(-1.6em, -3.9em); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .25s; }
.m-pin--us i { position: relative; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: #E8453C; color: #fff; font: 700 1.6em/1 Geist, sans-serif; box-shadow: 0 .3em .8em rgb(0 0 0 / .25); font-size: 1.6em; width: 2em; height: 2em; }
.m-pin--us i::after { content: ""; position: absolute; left: 50%; bottom: -.42em; translate: -50% 0; border: .3em solid transparent; border-top: .5em solid #E8453C; border-bottom: 0; }
.m-pin--us b { padding: .3em .7em; border-radius: .5em; background: #fff; font-size: 1.5em; font-weight: 600; box-shadow: 0 .2em .6em rgb(0 0 0 / .18); }
.m-ad:not(.done) .m-pin--us { opacity: 0; transform: translate(-1.6em, -8em); }
.m-place { display: flex; flex-direction: column; gap: .3em; transition: opacity .35s .2s, transform .45s .2s cubic-bezier(.2, .8, .2, 1); }
.m-ad:not(.done) .m-place { opacity: 0; transform: translateY(.8em); }
.m-place__name { font-size: 2.8em; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.m-place p { font-size: 1.55em; color: #5F6368; }
.m-open b { color: #188038; font-weight: 600; } .m-chip { margin-left: .7em; padding: .15em .65em; border-radius: 99em; background: #E8F0FE; color: #1A47B8; font-size: .9em; white-space: nowrap; } .m-chip b { color: inherit; font-variant-numeric: tabular-nums; }
.m-acts { display: flex; gap: .6em; margin-top: .45em; } .m-acts span { padding: .45em 1em; border-radius: 99em; box-shadow: inset 0 0 0 1px #DADCE0; color: #1A47B8; font-size: 1.45em; font-weight: 500; white-space: nowrap; } .m-acts span.on { background: #1A47B8; color: #fff; box-shadow: none; }
.m-upd { display: flex; flex-direction: column; gap: .2em; margin-top: .55em; padding-top: .7em; border-top: 1px solid #ECEDEF; } .m-upd small { font-size: 1.3em; color: #5F6368; } .m-upd span { color: #1F2024; font-size: 1.95em; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }

/* ---- Search, online: a shopping result ---- */
.m-spon { font-size: 1.4em; color: #5F6368; } .m-shop__line { font-size: 2.9em; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: #1A47B8; }
.m-tiles { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .9em; }
.m-tile { display: flex; flex-direction: column; gap: .35em; min-width: 0; padding: .7em; border-radius: 1em; box-shadow: inset 0 0 0 1px #E3E5E8; }
.m-tile__img { flex: 1; min-height: 0; border-radius: .7em; background: #F1F3F4; }
.m-tile--us { box-shadow: inset 0 0 0 2px #1A47B8; } .m-tile--us .m-tile__img { background: #F2C29C url(../assets/serum.webp) center 42% / cover; }
.m-tile p { font-size: 1.45em; line-height: 1.2; } .m-tile p b { font-size: 1.15em; } .m-tile small { font-size: 1.2em; color: #188038; }
.m-tile--ghost i { display: block; height: .9em; border-radius: .3em; background: #ECEEF0; } .m-tile--ghost i + i { width: 60%; }
.m-spon, .m-shop__line, .m-tiles { transition: opacity .35s .15s, transform .45s .15s cubic-bezier(.2, .8, .2, 1); }
.m-ad:not(.done) .m-spon, .m-ad:not(.done) .m-shop__line, .m-ad:not(.done) .m-tiles { opacity: 0; transform: translateY(.8em); }

/* ---- The hand on the piece in front of the billboard ---- */
.m-hint { position: absolute; left: 0; top: 0; z-index: 40; padding: 9px 14px 9px 32px; border-radius: 99px; background: rgb(14 16 19 / .84); color: #fff; font: 600 13px/1 Geist, sans-serif; letter-spacing: -.01em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.m-hint::before { content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -6.5px; border-radius: 50%; border: 2px solid #fff; animation: m-ping 1.6s ease-out infinite; }
@keyframes m-ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
html.m-grab, html.m-grab body { cursor: grab; } .mk--hold, html:has(.mk--hold) body { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .m-hint::before, .m-try.nudge button, .b-kit.tour .b-ask svg { animation: none; } .m-pin--us, .m-place { transition: none; } }