/* ================================================================
   SAM ENGLUND
   Page type steps sit on src/tokens.css — ground, accent, families.
   ================================================================ */

:root {
  /* ==============================================================
     RESPONSIVE FRAME
     ============================================================== */

  --gutter: clamp(20px, 3.8vw, 56px);
  --max: 1740px;

  /* ==============================================================
     TYPE SCALE

     One system.
     Every major text element is derived from the same viewport
     relationship and then capped.
     ============================================================== */

  --hero-size: clamp(58px, 14.75vw, 240px);
  --human-size: clamp(28px, 4.15vw, 54px);
  --connect-size: clamp(18px, 2.35vw, 30px);
  --meta-size: clamp(9px, .65vw, 10px);

  /* ==============================================================
     LINE HEIGHT
     ============================================================== */

  --hero-leading: .88;
  --human-leading: 1.18;
  --connect-leading: 1.32;

  /* ==============================================================
     TRACKING
     ============================================================== */

  --hero-tracking: -.055em;
  --human-tracking: -.035em;
  --connect-tracking: -.028em;

  /* ==============================================================
     MOTION
     Shared with /stuff: one hand, three speeds.
     ============================================================== */

  --ease: var(--ease-out);
  --ease-expo: var(--ease-out);
  --ease-soft: var(--ease-out);
}

/* ================================================================
   RESET
   ================================================================ */

*,
*::before, *::after {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--white);
  font-family: var(--body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

::selection {
  background: rgba(255,255,255,.16);
  color: var(--white);
}

* {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 1px solid rgba(255,255,255,.88);
  outline-offset: 8px;
}

/* ================================================================
   SCROLLBAR
   ============================================================== */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.13);
  border: 5px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.20);
  border: 4px solid transparent;
  background-clip: padding-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.13) transparent;
}

/* ================================================================
   FRAME
   ================================================================ */

.shell {
  width: 100%;
  max-width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: clip;
}

section {
  padding-top: clamp(72px, 9vw, 120px);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ================================================================
   HEADER
   ============================================================== */

.top {
  position: relative;
  z-index: 1000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: calc(clamp(22px, 4.8vw, 48px) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(22px, 4.8vw, 48px);
  transition: opacity .55s var(--ease-expo), transform .7s var(--ease-expo), background-color 1s var(--ease-soft), backdrop-filter 1s var(--ease-soft), -webkit-backdrop-filter 1s var(--ease-soft);
}

.top.nav-hidden {
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  pointer-events: none;
}

/* Holds the header's place while it is pinned (see SMART HEADER). */
.top.nav-revealed + main {
  margin-top: var(--top-h, 0px);
}
.top.nav-revealed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  margin: 0;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-right: var(--gutter);
  padding-bottom: 10px;
  padding-left: var(--gutter);
  background: rgba(24,24,27,.17);
  backdrop-filter: blur(20px) saturate(112%);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.top.nav-revealed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(24,24,27,.06), rgba(24,24,27,0));
}

/* ================================================================
   HEADER MARK
   ================================================================ */

.mark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: none;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .9s var(--ease-expo) .02s, transform 1.15s var(--ease-expo) .02s;
}

.page-ready .mark {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--motion-chrome) var(--ease);
}

.page-ready .mark:hover, .page-ready .mark:focus-visible {
  opacity: .55;
}

/* ================================================================
   HEADER CTA
   ============================================================== */

.top-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
}

.link {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: none;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .9s var(--ease-expo) .02s, transform 1.15s var(--ease-expo) .02s;
}

.page-ready .link {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--motion-chrome) var(--ease), transform .8s var(--ease-expo);
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .55s var(--ease-expo);
}

.link:hover, .link:focus-visible {
  opacity: 1;
}

.link:hover::after, .link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ================================================================
   HERO
   ================================================================ */

.hero {
  position: relative;
  max-width: 100%;
  padding-top: clamp(60px, 11vh, 128px);
  padding-bottom: 0;
  perspective: 1400px;
}

.hero h1 {
  width: min(100%, 10.25em);
  max-width: 100%;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--hero-size);
  font-weight: 500;
  letter-spacing: var(--hero-tracking);
  line-height: var(--hero-leading);
  text-transform: none;
}

.hero-line {
  display: block;
  position: relative;
  max-width: 100%;
  opacity: 0;

  /* Motion is quiet on purpose: a short rise and a fade, no blur,
     no tilt. Every entrance on the site shares this curve. */
  transform: translate3d(0, 14px, 0);
  transition: opacity 1s var(--ease-expo) var(--delay), transform 1.2s var(--ease-expo) var(--delay);
  will-change: opacity, transform;
}

.hero-line > span {
  display: block;
  max-width: 100%;
  transform: translate3d(0, 24px, 0) scale(1.012);
  transform-origin: center bottom;
  transition: transform 1.6s var(--ease-expo) var(--delay);
  will-change: transform;
}

.page-ready .hero-line {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.page-ready .hero-line > span {
  transform: translate3d(0, 0, 0) scale(1);
}

.hero-line:nth-child(1) {
  --delay: .08s;
}

.hero-line:nth-child(2) {
  --delay: .18s;
}

.hero-line:nth-child(3) {
  --delay: .28s;
  color: var(--text-strong);
}

/* ================================================================
   HUMAN DIRECTION
   ================================================================ */

.standfirst {
  /*
   * Deliberately narrow.
   * This creates designed line breaks instead of stretching
   * the sentence across the whole canvas.
   */

  width: min(18em, 100%);
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  white-space: normal;
  margin: clamp(60px, 7vw, 86px) 0 0;
  color: var(--text-strong);
  font-family: var(--display);
  font-size: var(--human-size);
  font-weight: 500;
  line-height: var(--human-leading);
  letter-spacing: var(--human-tracking);
  text-transform: none;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .95s var(--ease-expo) .40s, transform 1.15s var(--ease-expo) .40s;
}

.page-ready .standfirst {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ================================================================
   CONNECT
   ================================================================ */

.connect-section {
  padding-top: clamp(88px, 11vw, 148px);
}

.connect {
  width: min(100%, 620px);
}

.connect-copy {
  max-width: 36em;
  margin: 0;
  color: var(--text-soft);
  font-family: var(--display);
  font-size: var(--connect-size);
  font-weight: 500;
  letter-spacing: var(--connect-tracking);
  line-height: var(--connect-leading);
  text-transform: none;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .95s var(--ease-expo) .06s, transform 1.1s var(--ease-expo) .06s;
}

.connect-section.is-visible .connect-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.connect-copy a {
  position: relative;
  color: var(--white);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .55s var(--ease);
}

/* On touch screens the inline link is only a line of text tall.
   An invisible pad around it gives a finger-sized target without
   changing how it looks. */
@media (pointer: coarse) {
  .connect-copy a::after {
    content: "";
    position: absolute;
    inset: -13px -6px;
  }
}

.connect-copy a:hover, .connect-copy a:focus-visible {
  color: var(--white);
  background-size: 100% 1px;
}

.connect-rest {
  color: var(--text-soft);
}

/* ================================================================
   FOOTER
   ================================================================ */

.foot {
  margin-top: clamp(88px, 11vw, 140px);
  padding: 0 0 calc(44px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .7s var(--ease-expo) .48s, transform .85s var(--ease-expo) .48s;
}

.page-ready .foot,
.footer-ready.foot {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ================================================================
   FOOTER STICKERS
   ================================================================ */

.footer-stickers {
  position: relative;
  width: 100%;

  /* Tall enough for the lowest sticker, no taller: the footer
     follows without an empty band. */
  height: clamp(290px, 24vw, 330px);
  margin-bottom: clamp(40px, 5vw, 64px);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 1s var(--ease-expo) .18s, transform 1.2s var(--ease-expo) .18s;
}

.footer-ready .footer-stickers {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.footer-sticker {
  position: absolute;
  display: block;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(0, var(--entry-y), 0) rotate(var(--entry-rotation)) scale(.97);
  transition: opacity .9s var(--ease-expo) var(--delay), transform 1.2s var(--ease-expo) var(--delay);
  will-change: transform, opacity;
}

.footer-ready .footer-sticker {
  opacity: 1;

  /* The camera's drift, plus wherever the sticker has been stuck. */
  transform: translate3d(calc(var(--footer-x,0px) + var(--drag-x,0px)), calc(var(--footer-y,0px) + var(--drag-y,0px)), 0) rotate(var(--rotation)) scale(1);
}

/* ================================================================
   PEEL AND STICK (src/stickers.js)
   ================================================================ */

.footer-sticker {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer-sticker { cursor: grab; }
}

/* Peeled: it follows the hand at once, lifts off the page and leans
   into the pull. */
.footer-ready .footer-sticker.is-peeled {
  transition: opacity .3s var(--ease-expo), transform 0s;
}

.footer-sticker.is-peeled .footer-sticker-inner {
  transform: scale(1.08) rotate(var(--drag-rot, 0deg)) !important;
  transition: transform .28s var(--ease-expo);
}

.footer-sticker.is-peeled img {
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)) drop-shadow(0 26px 34px rgba(0,0,0,.42)) !important;
}

.footer-sticker.is-peeled .footer-sticker-shadow {
  opacity: .55 !important;
  transform: translateY(28px) scale(1.1) !important;
}

html.is-peeling,
html.is-peeling * {
  cursor: grabbing !important;
}

/* Stuck: a quick slap onto the page, then flat. */
.footer-sticker.is-stuck .footer-sticker-inner {
  animation: stickerSlap .42s var(--ease-expo) both;
}

@keyframes stickerSlap {
  0% { transform: scale(1.08); }
  45% { transform: scale(.955); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-sticker.is-stuck .footer-sticker-inner { animation: none; }
  /* Still movable: no drift or entrance, but a stuck sticker stays put. */
  html body .footer-ready .footer-sticker {
    transform: translate3d(var(--drag-x,0px), var(--drag-y,0px), 0) rotate(var(--rotation)) !important;
  }
}

/* ================================================================
   EDITORIAL POSITIONS
   ================================================================ */

.footer-sticker:nth-child(1) {
  left: 3%;
  top: 38px;
  width: clamp(155px, 18vw, 245px);
  --rotation: -5.2deg;
  --entry-rotation: -6.8deg;
  --entry-y: 32px;
  --delay: .10s;
  --depth: .42;
}

.footer-sticker:nth-child(2) {
  left: 33%;
  top: 8px;
  width: clamp(68px, 7vw, 105px);
  --rotation: 7.5deg;
  --entry-rotation: 9deg;
  --entry-y: 20px;
  --delay: .17s;
  --depth: -.58;
}

.footer-sticker:nth-child(3) {
  left: 47%;
  top: 95px;
  width: clamp(115px, 13vw, 180px);
  --rotation: -2.8deg;
  --entry-rotation: -4.2deg;
  --entry-y: 34px;
  --delay: .24s;
  --depth: .26;
}

.footer-sticker:nth-child(4) {
  right: 6%;
  top: 25px;
  width: clamp(130px, 14.5vw, 195px);
  --rotation: 4.6deg;
  --entry-rotation: 6deg;
  --entry-y: 40px;
  --delay: .31s;
  --depth: -.42;
}

.footer-sticker-inner {
  display: block;
  transition: transform .85s var(--ease);
}

.footer-sticker img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.32)) drop-shadow(0 10px 18px rgba(0,0,0,.25));
  transition: filter .85s var(--ease);
}

.footer-sticker-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -8%;
  height: 22%;
  background: rgba(0,0,0,.38);
  filter: blur(13px);
  opacity: .28;
  transform: translateY(8px);
  transition: transform .85s var(--ease), opacity .85s var(--ease);
}

@media (hover:hover) {
  .footer-sticker:hover .footer-sticker-inner, .footer-sticker:focus-visible .footer-sticker-inner {
    transform: translate3d(var(--mouse-x,0px), var(--mouse-y,-4px), 0) scale(1.025);
  }

  .footer-sticker:hover img, .footer-sticker:focus-visible img {
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.28)) drop-shadow(0 16px 27px rgba(0,0,0,.34));
  }

  .footer-sticker:hover .footer-sticker-shadow, .footer-sticker:focus-visible .footer-sticker-shadow {
    opacity: .48;
    transform: translateY(12px);
  }
}

/* ================================================================
   FOOTER METADATA
   ================================================================ */

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 56px);
}

@media (max-width: 560px) {
  .colophon {
    flex-direction: column;
    gap: 22px;
  }

  .top {
    gap: 12px;
  }

  .mark,
  .link {
    font-size: 14px;
  }
}

.col-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.col-key {
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: none;
}

.col-val {
  color: var(--text-soft);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.4;
  text-transform: none;
}

/* ================================================================
   SKIP
   ================================================================ */

.skip {
  position: absolute;
  left: var(--gutter);
  top: 12px;
  z-index: 4000;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ground);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  text-transform: none;
  transform: translateY(-160%);
}

.skip:focus, .skip:focus-visible {
  transform: translateY(0);
  outline-offset: 4px;
}

/* ================================================================
   BOOT
   ================================================================ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  pointer-events: none;
}

.boot-mark {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.boot-word {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(36px, 8vw, 88px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .9;
  text-transform: none;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.boot-rule {
  display: block;
  width: 96px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
}

body:not(.boot-done) .boot-word {
  animation: bootWord 1.05s var(--ease-expo) .08s forwards;
}

body:not(.boot-done) .boot-rule {
  animation: bootRule .7s var(--ease-expo) .42s forwards;
}

.boot-seen .boot {
  display: none;
}

.boot-done .boot {
  animation: bootOut .7s var(--ease-expo) forwards;
}

@keyframes bootWord {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bootRule {
  to {
    transform: scaleX(1);
  }
}

@keyframes bootOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ================================================================
   CLIENTS

   One specimen field. Twelve equal cells, no label, no chips.
   The grid is the composition — marks sit in air, the way
   Unibet’s filter panels sit in one system rather than as
   a pile of cards.
   ================================================================ */

.clients {
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: 0;
}

/* Says what the logos are: brands across a career, so no one goes
   looking for a case study behind each one. */
.clients-label {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text-soft);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.client {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(92px, 11vw, 132px);
  margin: 0;
  padding: 0 12%;
  opacity: 0;
}

.page-ready .client {
  opacity: .58;
  animation: clientIn .9s var(--ease-expo) var(--delay, 0s) both;
  transition: opacity .3s var(--ease);
}

@keyframes clientIn {
  from {
    transform: translate3d(0, 6px, 0);
  }

  to {
    transform: none;
    filter: none;
  }
}

.client img {
  display: block;
  width: auto;
  height: clamp(18px, 1.85vw, 24px);
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

.client[data-client="hm"] img {
  height: clamp(26px, 2.6vw, 34px);
  max-width: 52%;
}

/* The wordmark alone: the logo's solid button circle, dimmed like the
   other marks, read as a grey blot. */
.client[data-client="flic"] img {
  height: clamp(32px, 3.2vw, 42px);
}

.client[data-client="loreal"] img,
.client[data-client="mondelez"] img {
  height: clamp(22px, 2.3vw, 30px);
}

.client[data-client="hyper-island"] img {
  height: clamp(14px, 1.45vw, 18px);
}

.client[data-client="unibet"] img {
  height: clamp(20px, 2.1vw, 28px);
}

@media (hover:hover) {
  .page-ready .client:hover, .page-ready .client:focus-within {
    opacity: .96;
  }
}

/* The label arrives just before the first logo, the same way. */
.clients-label { opacity: 0; }
.page-ready .clients-label {
  opacity: 1;
  animation: labelIn 1.4s var(--ease-dream) calc(.32s + .3s + var(--intro, 0s)) backwards;
}
/* Its own fade, ending at its own full opacity. It borrowed the logos'
   fade, which ends at their dimmed .58, so the label sat dim and then
   snapped to full a moment after the entrance: the blink. */
@keyframes labelIn {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clients-label, .page-ready .clients-label { opacity: 1 !important; animation: none !important; }
}
/* On a wide screen, a short one or a phone on its side the logos sit
   below the fold, and their entrance used to play there unseen. They
   wait until they are in view; seen after the page has settled, they
   skip the wait for the headline. */
.clients:not(.is-seen) .client, .clients:not(.is-seen) .clients-label {
  opacity: 0;
  animation: none;
}
.clients.is-late {
  --intro: -.55s;
}
.page-ready .client:nth-child(1) { --delay: .38s; }
.page-ready .client:nth-child(2) { --delay: .42s; }
.page-ready .client:nth-child(3) { --delay: .46s; }
.page-ready .client:nth-child(4) { --delay: .50s; }
.page-ready .client:nth-child(5) { --delay: .54s; }
.page-ready .client:nth-child(6) { --delay: .58s; }
.page-ready .client:nth-child(7) { --delay: .46s; }
.page-ready .client:nth-child(8) { --delay: .50s; }
.page-ready .client:nth-child(9) { --delay: .54s; }
.page-ready .client:nth-child(10) { --delay: .58s; }
.page-ready .client:nth-child(11) { --delay: .62s; }
.page-ready .client:nth-child(12) { --delay: .66s; }

/* ================================================================
   TABLET
   ================================================================ */

@media
  (min-width:721px) and (max-width:1100px) {
  :root {
    --hero-size: clamp(48px, 8.8vw, 110px);
    --human-size: clamp(30px, 4vw, 38px);
    --connect-size: clamp(19px, 2.8vw, 27px);
  }

  .hero h1 {
    width: min(100%, 10em);
  }

  .standfirst {
    width: min(18em, 100%);
    max-width: 100%;
  }

  .clients-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .client {
    min-height: 108px;
  }

  .connect {
    max-width: 600px;
  }

  .footer-stickers {
    height: 300px;
  }
}

/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width:720px) {
  :root {
    --hero-size: clamp(40px, 10.4vw, 72px);
    --human-size: clamp(20px, 5.2vw, 26px);
    --connect-size: clamp(18px, 5.5vw, 25px);
  }

  .hero {
    padding-top: 42px;
    padding-bottom: 0;
  }

  .hero h1 {
    width: 100%;
    max-width: 100%;
    letter-spacing: -.05em;
    line-height: .92;
  }

  .hero-line,
  .hero-line > span {
    max-width: 100%;
  }

  .standfirst {
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    line-height: 1.22;
  }

  .connect-section {
    padding-top: 80px;
  }

  .connect {
    width: 100%;
    max-width: 600px;
  }

  .connect-copy {
    max-width: 100%;
    line-height: 1.32;
  }

  .clients-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .client {
    min-height: 84px;
    padding: 0 10%;
  }

  .client img {
    height: 18px;
  }

  .client[data-client="hm"] img {
    height: 26px;
  }

  .client[data-client="flic"] img {
    height: 32px;
  }

  .top.nav-revealed {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
  }

  .footer-stickers {
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: 52px;
  }

  /* A loose 2 × 2 collage: each sticker keeps its whole face. */
  .footer-sticker:nth-child(1) {
    left: 2%;
    top: 6%;
    width: 45%;
  }

  .footer-sticker:nth-child(2) {
    left: 58%;
    top: 1%;
    width: 21%;
  }

  .footer-sticker:nth-child(3) {
    left: 14%;
    top: 44%;
    width: 31%;
  }

  .footer-sticker:nth-child(4) {
    right: 2%;
    top: 34%;
    width: 36%;
  }
}

/* ================================================================
   VERY SMALL DEVICES
   ================================================================ */

@media (max-width:380px) {
  :root {
    --hero-size: 38px;
    --human-size: 22px;
    --connect-size: 17px;
  }

  .hero h1 {
    letter-spacing: -.052em;
  }

  .standfirst {
    width: 100%;
    max-width: 100%;
  }

  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client {
    min-height: 96px;
  }

  .footer-stickers {
    height: 220px;
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

/* ================================================================
   MOTION LAYER
   One curve for every arrival (expo out), one for exits. Entrances
   keep their long timings until the page has settled, then chrome
   answers the pointer quickly.
   ================================================================ */

/* Header: the entrance eases in on its own timing (it used to snap,
   because the ready state swapped in the short hover transition). */
.page-ready .mark,
.page-ready .link {
  transition: opacity .9s var(--ease-expo) .04s, transform 1.1s var(--ease-expo) .04s;
}

body.page-settled .mark,
body.page-settled .link {
  transition: opacity var(--motion-chrome) var(--ease), transform .8s var(--ease-expo);
}

/* ================================================================
   PAGE LOAD: DREAM
   First visit: the name arrives out of soft focus, then glides up
   into the corner and becomes the header mark while the headline
   exhales in behind it, line by line. Returning visits skip the name
   and go straight to the headline. Everything shares one long, soft
   curve (--ease-dream) and one grammar: blur, a small rise, a fade.
   ================================================================ */

/* While the name dissolves, the headline waits a beat for it. */
body.boot-leaving {
  --intro: .35s;
}

/* Boot: the name comes into focus instead of fading up. */
.boot-word {
  filter: blur(12px);
}

body:not(.boot-done) .boot-word {
  animation: bootWord 1.3s var(--ease-dream) .1s forwards;
}

/* Held at its first frame until the typeface has arrived. */
html:not(.fonts-ready) body:not(.boot-done) .boot-word {
  animation-play-state: paused;
}

@keyframes bootWord {
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Leaving: the name and its rule dissolve upward in place, out of
   focus, while the veil thins and the headline exhales in behind. No
   travel, no scaling: nothing has to line up with anything. */
.boot.is-leaving {
  animation: bootVeilOut 1s var(--ease-dream) .15s forwards !important;
}

.boot.is-leaving .boot-word {
  opacity: 1;
  filter: none;
  transform: none;
}

.boot.is-leaving .boot-rule {
  transform: scaleX(1);
}

.boot.is-leaving .boot-mark {
  animation: dreamOut .9s var(--ease-dream) forwards;
}

@keyframes bootVeilOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Hero: each line exhales in out of soft focus. */
.hero-line {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero-line > span {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 20px, 0);
  transition: opacity 1.3s var(--ease-dream) calc(var(--delay) + var(--intro, 0s)), filter 1.6s var(--ease-dream) calc(var(--delay) + var(--intro, 0s)), transform 1.9s var(--ease-dream) calc(var(--delay) + var(--intro, 0s));
}

.page-ready .hero-line {
  opacity: 1;
  transform: none;
}

.page-ready .hero-line > span {
  opacity: 1;
  filter: none;
  transform: none;
}

/* The line under the headline follows the last hero line. */
.standfirst {
  filter: blur(10px);
  transition: opacity 1.3s var(--ease-dream) calc(.52s + var(--intro, 0s)), filter 1.6s var(--ease-dream) calc(.52s + var(--intro, 0s)), transform 1.9s var(--ease-dream) calc(.52s + var(--intro, 0s));
}

.page-ready .standfirst {
  filter: none;
}

/* Header links arrive after the words, never before them. */
.page-ready .link {
  transition: opacity 1.2s var(--ease-dream) calc(.7s + var(--intro, 0s)), transform 1.4s var(--ease-dream) calc(.7s + var(--intro, 0s));
}

/* Clients: the fade rides the stagger, out of the same soft focus. */
.page-ready .client {
  animation: clientIn 1.4s var(--ease-dream) calc(var(--delay, 0s) + .3s + var(--intro, 0s)) backwards;
}

@keyframes clientIn {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: .58;
    filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .mark,
  .link,
  .hero-line,
  .hero-line > span,
  .standfirst,
  .connect-copy,
  .foot,
  .footer-stickers,
  .footer-sticker,
  .client,
  .boot-word,
  .boot-rule {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .boot,
  .boot-done .boot {
    display: none !important;
    animation: none !important;
  }

  .page-ready .client {
    opacity: .58 !important;
  }

  .top {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Descenders (g, y, p) hang below the tight leading. While a line
   fades in out of blur it is drawn as its own layer and cut at its
   box, so the box gets room for them, given back by the negative
   margin. */
.hero-line > span,
.boot-word {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

/* Connect leaves the site: a small drawn arrow says so before the
click. Same colour and stroke weight as the letters, square-cut. */
.ext { display: inline-block; flex: none; width: .6em; height: .6em; margin-left: .3em; vertical-align: .22em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; transition: transform .45s cubic-bezier(.16,1,.3,1); }
a:hover > .ext, a:focus-visible > .ext { transform: translate(1px, -1px); }

/* The way on, lit after a long still moment (src/home.js). */
.link.is-beckon::after { transform: scaleX(1); transform-origin: left center; transition: transform 2.4s var(--ease-expo); }
.link.is-beckon { animation: beckonGlow 3.2s ease-in-out .6s infinite alternate; }
@keyframes beckonGlow { from { text-shadow: 0 0 0 rgba(255,255,255,0); } to { text-shadow: 0 0 16px rgba(255,255,255,.5); } }
@media (prefers-reduced-motion: reduce) { .link.is-beckon { animation: none; text-shadow: 0 0 12px rgba(255,255,255,.4); } }

/* Who, before what: the name and the trade, in the label voice, above
the headline. Arrives with the chrome, like the brands label. */
.hero-who {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text-soft);
  opacity: 0;
}
.page-ready .hero-who {
  opacity: 1;
  animation: labelIn 1.4s var(--ease-dream) calc(.02s + var(--intro, 0s)) backwards;
}
@media (prefers-reduced-motion: reduce) { .hero-who, .page-ready .hero-who { opacity: 1; animation: none; } }
/* Continue reading (src/home.js): for a returning visitor, under the
standfirst, in the label voice, arriving after it. */
.hero-resume {
  margin: clamp(22px, 3vw, 34px) 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text-soft);
  opacity: 0;
}
.page-ready .hero-resume {
  opacity: 1;
  animation: labelIn 1.4s var(--ease-dream) calc(.9s + var(--intro, 0s)) backwards;
}
.hero-resume a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: 3px;
  transition: text-decoration-color .3s var(--ease);
}
.hero-resume a:hover, .hero-resume a:focus-visible { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .hero-resume, .page-ready .hero-resume { opacity: 1; animation: none; } }
/* The hello from a link Sam sent: its own line on a phone, so the
introduction does not break mid-trade. */
.hero-trade { white-space: nowrap; }
@media (max-width: 600px) { .hero-hello { display: block; } }