/* ═══════════════════════════════════════════════════════════════════════
   HOME — one screen, no scroll.

   A specimen card in the middle of a chalk viewport opens to full bleed on
   the visitor's first gesture (wheel, swipe, arrow key, or a click on the
   card), and the site's chrome — wordmark, tabs, the one action — arrives
   on the opened photograph. Gesture up closes it again. There is no page
   scroll: public/js/curtain.js turns gesture into a 0→1 progress and
   writes every scrubbed value inline; this file owns the resting states,
   the hover/focus states, and the two entrances CSS can carry alone.

   React Bits grammar, ported to vanilla and to this system:
     ScrollExpand    the frame (clip-path inset → full bleed, media 1.28 → 1)
     PillNav         the tab plates: a terracotta disc rises through the plate
                     on hover and the label swaps to chalk
     Magnet          the CTA and the wordmark ease toward the cursor
     BlurText        the lead resolves word by word out of blur
     SplitText       the claim's words rise in on load
     ShinyText       one light sweep across the CTA when it lands
     AnimatedContent the chrome's arrival: slide + fade, exponential ease
     GradualBlur     a masked backdrop-blur band that keeps chalk type legible
                     over the photograph

   The lock and the chrome skin arm only under body.hs-js (set by the
   script). Without JS the page is a normal editorial page: the topbar is
   the site's chalk bar, the card is a static 16:10 box, and everything the
   reveal would show is simply visible.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The lock ─────────────────────────────────────────────────────────── */

body.curtain.hs-js {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  padding-bottom: 0;
}

body.curtain.hs-js .shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.curtain.hs-js .editorial-main {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* The injected footer has no screen to sit on; the footline carries the
   legal links instead. */
body.curtain.hs-js .site-footer {
  display: none;
}

body.curtain ::selection {
  background: var(--terracotta);
  color: var(--chalk);
}

/* ── Stage ────────────────────────────────────────────────────────────── */

body.curtain.hs-js .hs-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.hs-hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--chalk);
  touch-action: none;
}

/* ScrollExpand: the frame is the whole stage, clipped down to a card. The
   script rewrites clip-path and the media scale every frame. */
.hs-hero__frame {
  position: absolute;
  inset: 0;
  clip-path: inset(21% 29% 21% 29% round 20px);
  will-change: clip-path;
}

body.curtain.hs-js:not(.hs-chrome-on) .hs-hero__frame {
  cursor: pointer;
}

.hs-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  will-change: transform;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

/* Tissue over the specimen: the card rests slightly veiled so the ink claim
   sits on paper, and the photograph comes to full colour as it opens. */
.hs-hero__veil {
  position: absolute;
  inset: 0;
  background: var(--chalk);
  opacity: 0.3;
  pointer-events: none;
}

.hs-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.74) 0%,
    rgba(10, 10, 10, 0.24) 42%,
    rgba(10, 10, 10, 0.04) 70%,
    rgba(10, 10, 10, 0.12) 100%
  );
  opacity: 0;
}

/* GradualBlur: five masked backdrop layers of rising strength, so the lead
   and the footline read over the fabric without a heavier scrim. Off the
   compositor entirely while the card is closed. */
.hs-hero__blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  opacity: 0;
}

.hs-hero__blur:not(.is-on) {
  display: none;
}

.hs-hero__blur i {
  position: absolute;
  inset: 0;
  display: block;
}

.hs-hero__blur i:nth-child(1) { -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px);  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%); mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%); }
.hs-hero__blur i:nth-child(2) { -webkit-backdrop-filter: blur(6px);  backdrop-filter: blur(6px);  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%); mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%); }
.hs-hero__blur i:nth-child(3) { -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px);  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%); }
.hs-hero__blur i:nth-child(4) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 80%, #000 100%); mask-image: linear-gradient(to bottom, transparent 60%, #000 80%, #000 100%); }
.hs-hero__blur i:nth-child(5) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); }

/* ── Resting copy: the claim, the caption, the hint ───────────────────── */

.hs-hero__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6%;
  text-align: center;
  pointer-events: none;
  will-change: opacity, transform;
}

.hs-hero__heading {
  display: block;
  max-width: 13ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.hs-hero__heading em {
  font-style: italic;
  color: var(--terracotta);
}

/* SplitText: each word rises in on load, staggered by its index. */
@keyframes hs-rise {
  from { opacity: 0; transform: translate3d(0, 0.55em, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hs-hero__title.is-in .hs-w {
  display: inline-block;
  animation: hs-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(160ms + var(--i, 0) * 80ms);
}

.hs-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  /* --hs-cb is the card's bottom edge, written by the script (it depends
     on the viewport's width and height); 79% is the desktop resting card. */
  top: calc(var(--hs-cb, 79%) + 22px);
  z-index: 2;
  margin: 0 auto;
  max-width: 72ch;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--thread);
  text-wrap: balance;
  pointer-events: none;
  will-change: opacity, transform;
}

.hs-hero__hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  transform: translateX(-50%);
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--thread);
  cursor: pointer;
  will-change: opacity, transform;
}

.hs-hero__hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  margin: 10px auto 0;
  background: var(--thread);
  opacity: 0.55;
  transform-origin: top;
  animation: hs-nudge 2.2s ease-in-out infinite;
}

@keyframes hs-nudge {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.5); }
}

.hs-hero__hint:hover,
.hs-hero__hint:focus-visible {
  color: var(--ink);
}

.hs-hero__hint:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

/* ── Opened copy: lead, actions, footline ─────────────────────────────── */

.hs-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--s-5);
  padding: clamp(28px, 4.4vw, 64px);
  pointer-events: none;
}

.hs-hero__overlay-lead {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

/* BlurText: the script writes opacity, blur and lift per word. */
.hs-bw {
  display: inline-block;
  will-change: opacity, filter, transform;
}

.hs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  will-change: opacity, transform;
}

.hs-hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  overflow: hidden;
  background: var(--terracotta);
  color: var(--chalk);
  font-family: var(--font-sans);
  /* 19px semibold is WCAG large text: chalk on terracotta measures 3.8:1,
     enough for large text, not for a 16px label. */
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.hs-hero__cta-label {
  position: relative;
  z-index: 1;
}

/* ShinyText, on the plate rather than the glyphs: one chalk sweep when the
   action lands, then nothing. */
.hs-hero__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(120deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%, transparent 100%);
  background-size: 200% auto;
  background-position: 150% center;
}

.hs-hero__cta.is-shine::after {
  animation: hs-sheen 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes hs-sheen {
  from { opacity: 1; background-position: 150% center; }
  to   { opacity: 1; background-position: -50% center; }
}

.hs-hero__cta:hover,
.hs-hero__cta:focus-visible {
  background: var(--chalk);
  color: var(--ink);
}

.hs-hero__cta:focus-visible,
.hs-hero__quiet:focus-visible,
.hs-hero__footline a:focus-visible {
  outline: 1px solid var(--chalk);
  outline-offset: 3px;
}

.hs-hero__quiet {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--chalk);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  transition: border-color 160ms ease;
}

.hs-hero__quiet:hover,
.hs-hero__quiet:focus-visible {
  border-bottom-color: var(--chalk);
}

/* The care label at the foot of the opened page: legal routes and the
   imprint, set in the site's control voice. Its bottom aligns with the
   CTA's vertical centre. */
.hs-hero__footline {
  position: absolute;
  right: clamp(28px, 4.4vw, 64px);
  bottom: calc(clamp(28px, 4.4vw, 64px) + 18px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  will-change: opacity, transform;
}

.hs-hero__footline a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.hs-hero__footline a:hover,
.hs-hero__footline a:focus-visible {
  color: var(--chalk);
  border-bottom-color: var(--chalk);
}

/* Magnet: the element carries its pull as two variables the script writes;
   settle is slower than pull, as in the source. */
.hs-magnet {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.hs-magnet.is-near {
  transition: transform 0.3s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHROME — the site's injected top bar, re-skinned for the opened stage.
   Same DOM every other page uses (site-subpage-chrome.js), so navigation
   stays one system; on the home screen the bar is transparent and each
   part of it is a chalk plate with a hairline seam. The script fades and
   lifts the parts in by progress; the bar is hidden and inert until then.
   ═══════════════════════════════════════════════════════════════════════ */

body.curtain.hs-js .site-topbar {
  background: transparent;
  border-bottom: 0;
  padding-inline: clamp(28px, 4.4vw, 64px);
  pointer-events: none;
}

body.curtain.hs-js .site-topbar > * {
  pointer-events: auto;
}

body.curtain.hs-js:not(.hs-chrome-on) .site-topbar {
  visibility: hidden;
}

/* The wordmark sits straight on the photograph — no plate. It is the brand
   mark, not a control, so it takes the image directly while the tabs beside
   it stay on their chalk plates. The hero's top band is pale studio ground
   (~#DAD4CC), where the ink mark reads at about 12:1. */
body.curtain.hs-js .site-topbar__brand {
  height: 44px;
  padding: 0;
  background: none;
  will-change: opacity, transform;
}

body.curtain.hs-js .site-topbar__brand img {
  height: 36px;
}

/* Tab plates — PillNav, squared to the system. One chalk strip, seams
   between the tabs, a terracotta disc that rises through the plate on
   hover while the ink label leaves through the top and its chalk twin
   comes up from the bottom. */
body.curtain.hs-js .site-topbar__nav {
  gap: 0;
}

body.curtain.hs-js .site-topbar__link {
  --hs-plate-h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hs-plate-h);
  padding: 0 18px;
  overflow: hidden;
  border-bottom: 0;
  background: var(--chalk);
  color: var(--ink);
  will-change: opacity, transform;
}

body.curtain.hs-js .site-topbar__link + .site-topbar__link {
  border-left: 1px solid var(--hairline);
}

body.curtain.hs-js .site-topbar__link:hover,
body.curtain.hs-js .site-topbar__link:focus-visible,
body.curtain.hs-js .site-topbar__link.is-active {
  color: var(--ink);
  border-bottom: 0;
}

body.curtain.hs-js .site-topbar__link:focus-visible {
  outline: 1px solid var(--chalk);
  outline-offset: 3px;
}

.hs-pill__circle {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  display: block;
  background: var(--terracotta);
  /* border-radius is reset to 0 site-wide; the disc is a clip instead. */
  clip-path: circle(50% at 50% 50%);
  transform: translateX(-50%) scale(0);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: transform;
}

.hs-pill__stack {
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 1;
}

.hs-pill__label {
  display: inline-block;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Hidden everywhere the home skin is not active, so the duplicated label
   can never print twice on a subpage. */
.hs-pill__label-hover {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  line-height: 1;
  /* Ink, not chalk, on the terracotta disc: an 11px label needs 4.5:1 and
     chalk on the dye is 3.8:1; ink on it is 5:1. */
  color: var(--ink);
  opacity: 0;
  transform: translateY(calc(var(--hs-plate-h, 44px) + 12px));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  will-change: transform, opacity;
}

body.curtain.hs-js .hs-pill__label-hover {
  display: inline-block;
}

body.curtain.hs-js .site-topbar__link:hover .hs-pill__circle,
body.curtain.hs-js .site-topbar__link:focus-visible .hs-pill__circle {
  transform: translateX(-50%) scale(1.2);
  transition-duration: 0.3s;
}

body.curtain.hs-js .site-topbar__link:hover .hs-pill__label,
body.curtain.hs-js .site-topbar__link:focus-visible .hs-pill__label {
  transform: translateY(calc(-1 * var(--hs-plate-h, 44px) - 8px));
  transition-duration: 0.3s;
}

body.curtain.hs-js .site-topbar__link:hover .hs-pill__label-hover,
body.curtain.hs-js .site-topbar__link:focus-visible .hs-pill__label-hover {
  transform: translateY(0);
  opacity: 1;
  transition-duration: 0.3s;
}

/* Talk-to-AI plate */
body.curtain.hs-js .ai-links--bar {
  height: 44px;
  margin-left: 12px;
  padding: 0 6px 0 14px;
  border-left: 0;
  background: var(--chalk);
  gap: 6px;
  will-change: opacity, transform;
}

body.curtain.hs-js .ai-links__btn {
  width: 32px;
  height: 32px;
}

/* The hero carries the one action; the bar's duplicate stays off here. */
body.curtain.hs-js .site-topbar__cta {
  display: none;
}

/* Phone: the index toggle as a plate */
body.curtain.hs-js .site-topbar .site-nav {
  will-change: opacity, transform;
}

body.curtain.hs-js .site-menu-toggle {
  width: 44px;
  height: 44px;
  background: var(--chalk);
}

body.curtain.hs-js .site-menu-toggle:hover {
  transform: none;
}

body.curtain.hs-js .site-menu-panel {
  border-color: var(--hairline);
}

/* ── Phone ────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .hs-hero__frame {
    clip-path: inset(19% 11% 19% 11% round 16px);
  }

  .hs-hero__heading {
    max-width: 12ch;
    font-size: clamp(34px, 10.5vw, 44px);
  }

  .hs-hero__caption {
    top: calc(var(--hs-cb, 81%) + 16px);
    max-width: none;
    padding: 0 28px;
    font-size: var(--fs-11);
  }

  .hs-hero__hint {
    bottom: 18px;
  }

  /* The footline is two rows on a phone now (links, then the social
     buttons), so the lead and the action sit that much higher. */
  .hs-hero__overlay {
    padding: 20px 20px 108px;
    gap: var(--s-4);
  }

  .hs-hero__overlay-lead {
    max-width: 30ch;
    font-size: 15px;
  }

  .hs-hero__footline {
    left: 20px;
    right: 20px;
    bottom: 20px;
    justify-content: flex-start;
    gap: 6px 14px;
  }

  .hs-hero__blur {
    height: 52%;
  }

  /* Three layers is enough blur on a phone GPU. */
  .hs-hero__blur i:nth-child(4),
  .hs-hero__blur i:nth-child(5) {
    display: none;
  }

  body.curtain.hs-js .site-topbar {
    padding-inline: 20px;
  }

  body.curtain.hs-js .site-topbar__brand img {
    height: 30px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   STATIC — no JS. The card is a plain 16:10 box in a normal editorial page,
   the claim sits at its top in chalk and the lead + actions at its foot,
   the footline under those; nothing the reveal would show is hidden.
   (Reduced motion keeps the JS path and simply starts open.)
   ═══════════════════════════════════════════════════════════════════════ */

body.curtain .shell {
  padding-top: var(--topbar-h);
}

.hs-hero.hs-hero--static .hs-hero__stage {
  position: relative;
  inset: auto;
  overflow: visible;
  touch-action: auto;
}

.hs-hero.hs-hero--static .hs-hero__frame {
  position: relative;
  clip-path: none;
  aspect-ratio: 16 / 10;
  min-height: 520px;
  overflow: hidden;
}

.hs-hero.hs-hero--static .hs-hero__media {
  transform: none !important;
}

.hs-hero.hs-hero--static .hs-hero__veil,
.hs-hero.hs-hero--static .hs-hero__blur,
.hs-hero.hs-hero--static .hs-hero__caption,
.hs-hero.hs-hero--static .hs-hero__hint {
  display: none;
}

.hs-hero.hs-hero--static .hs-hero__scrim {
  opacity: 1;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.76), rgba(10, 10, 10, 0.44));
}

.hs-hero.hs-hero--static .hs-hero__title {
  justify-content: flex-start;
  padding-top: clamp(28px, 8vh, 64px);
}

.hs-hero.hs-hero--static .hs-hero__heading {
  max-width: min(90%, 16ch);
  font-size: clamp(30px, 4.4vw, 56px);
  color: var(--chalk);
}

.hs-hero.hs-hero--static .hs-hero__overlay {
  opacity: 1;
  padding-bottom: 72px;
  pointer-events: auto;
}

.hs-hero.hs-hero--static .hs-hero__footline {
  left: clamp(28px, 4.4vw, 64px);
  right: auto;
  bottom: 28px;
  justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════
   REGISTER — MOUNTED SPECIMEN (.hs-hero--paper)

   The home opens a wide photograph to full bleed: the image becomes the
   ground, and the type turns chalk over a scrim. Most of the site is not
   wide photography. It is line drawings and portrait plates, and cropping
   those to a landscape bleed would cut the drawing in half and blow a
   640px source up past its own resolution.

   So the second register mounts the specimen instead of bleeding it: the
   plate is contained, never cropped, sitting complete and at native size
   on the chalk ground, the way a specimen is mounted on a catalogue card.
   The ground stays paper, so the type stays ink and the scrim, veil and
   blur band all switch off. Same curtain, same gesture, same one action.
   ═══════════════════════════════════════════════════════════════════════ */

.hs-hero--paper .hs-hero__media {
  object-fit: contain;
  object-position: center;
  /* The plate is mounted, not bled: this box is the mount. It clears the
     tab plates above it and the lead, action and footline below it, so on
     paper the type never lands on the drawing. */
  inset: 10% 22% 26% 22%;
  width: 56%;
  height: 64%;
}

/* Paper needs none of the devices that make chalk type readable on a
   photograph, and each of them would only dirty the white ground. */
.hs-hero--paper .hs-hero__scrim,
.hs-hero--paper .hs-hero__blur {
  display: none !important;
}

.hs-hero--paper .hs-hero__overlay-lead {
  color: var(--ink);
}

.hs-hero--paper .hs-hero__quiet {
  color: var(--ink);
  border-bottom-color: rgba(10, 10, 10, 0.28);
}

.hs-hero--paper .hs-hero__quiet:hover,
.hs-hero--paper .hs-hero__quiet:focus-visible {
  border-bottom-color: var(--ink);
}

.hs-hero--paper .hs-hero__footline {
  color: var(--thread);
}

.hs-hero--paper .hs-hero__footline a {
  color: var(--ink);
  border-bottom-color: rgba(10, 10, 10, 0.22);
}

.hs-hero--paper .hs-hero__footline a:hover,
.hs-hero--paper .hs-hero__footline a:focus-visible {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* The action cannot invert to chalk on a chalk page, so it inverts to ink. */
.hs-hero--paper .hs-hero__cta:hover,
.hs-hero--paper .hs-hero__cta:focus-visible {
  background: var(--ink);
  color: var(--chalk);
}

.hs-hero--paper .hs-hero__cta:focus-visible,
.hs-hero--paper .hs-hero__quiet:focus-visible,
.hs-hero--paper .hs-hero__footline a:focus-visible {
  outline-color: var(--ink);
}

/* ── The chrome, on paper ──────────────────────────────────────────────
   A chalk plate on a chalk ground has no edge. On these pages the same
   plates become hairline outlines, which is what the rest of the site
   does with a control anyway. */

body.curtain-paper.hs-js .site-topbar__brand {
  background: none;
}

body.curtain-paper.hs-js .site-topbar__link,
body.curtain-paper.hs-js .ai-links--bar,
body.curtain-paper.hs-js .site-menu-toggle {
  background: transparent;
  border: 1px solid var(--hairline);
}

/* One seam between neighbours rather than two stacked. */
body.curtain-paper.hs-js .site-topbar__link + .site-topbar__link {
  margin-left: -1px;
}

body.curtain-paper.hs-js .site-topbar__link:focus-visible,
body.curtain-paper.hs-js .site-menu-toggle:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* ── Phone ───────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  /* A portrait plate centred in a portrait viewport would sit under the
     lead and the action. Lift it into the upper half instead. */
  .hs-hero--paper .hs-hero__media {
    inset: 5% 7% 38% 7%;
    width: 86%;
    height: 57%;
  }
}

/* ── Static (no JS) ──────────────────────────────────────────────────── */

.hs-hero--paper.hs-hero--static .hs-hero__frame {
  aspect-ratio: 3 / 4;
  min-height: 0;
}

.hs-hero--paper.hs-hero--static .hs-hero__scrim {
  display: none;
}

.hs-hero--paper.hs-hero--static .hs-hero__heading,
.hs-hero--paper.hs-hero--static .hs-hero__eyebrow {
  color: var(--ink);
}

.hs-hero--paper.hs-hero--static .hs-hero__media {
  object-position: center 22%;
}

/* ═══════════════════════════════════════════════════════════════════════
   The app-section rail (.section-tabs, injected by site-subpage-chrome.js)
   is a second navigation inside .shell. On a curtain page .shell is the
   whole screen, so the rail would land on top of the specimen. The four
   product surfaces ride in the footline on these pages instead.
   ═══════════════════════════════════════════════════════════════════════ */

body.curtain.hs-js .section-tabs {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE DECK (.hs-hero--content)

   A catalogue card has entries. On the business pages the opened curtain
   turns into one: the plate slides to the left margin and the card's
   entries arrive beside it as pages you turn — the same gesture that
   opened the card pages through them, the rail on the left jumps to any
   one, and the page never scrolls.

   React Bits grammar, ported to vanilla and to this system:
     Stepper        the turn between entries (direction-aware slide + fade)
                    and the numbered step track with its filling connector
     AnimatedList   every list item, column and row staggers in as an entry
                    lands (0.2s each, 0.1s apart, as in the source)
     PillNav        the rail: a terracotta disc rises through the active tab
     AnimatedContent the deck's own arrival, 250ms after the chrome
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The plate makes room ───────────────────────────────────────────── */

.hs-hero--content .hs-hero__media {
  transition:
    top 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    right 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    bottom 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    left 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    width 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    height 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    opacity 0.4s ease;
}

body.hs-chrome-on .hs-hero--content .hs-hero__media {
  inset: 12% 74% 30% 4.5%;
  width: 21.5%;
  height: 58%;
}

/* ── The deck ───────────────────────────────────────────────────────── */

.hs-deck {
  position: absolute;
  z-index: 3;
  left: 30%;
  right: clamp(28px, 4.4vw, 64px);
  top: 12%;
  bottom: 25%;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: var(--s-6);
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, visibility 0s 0.85s;
}

body.hs-chrome-on .hs-deck {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.25s, 0.25s, 0s;
}

/* Rail — one tab per entry, seams between, the active one marked by the
   thread. The hover disc is PillNav's, squared to the system. */
.hs-deck__rail {
  display: flex;
  flex-direction: column;
  align-self: start;
  border-top: 1px solid var(--hairline);
}

.hs-deck__tab {
  --hs-plate-h: 44px;
  position: relative;
  display: flex;
  align-items: center;
  height: var(--hs-plate-h);
  padding: 0 14px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--thread);
  cursor: pointer;
  transition: color 160ms ease;
}

.hs-deck__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--terracotta);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hs-deck__tab[aria-selected="true"] {
  color: var(--ink);
}

.hs-deck__tab[aria-selected="true"]::before {
  transform: scaleY(1);
}

.hs-deck__tab .hs-pill__circle {
  background: var(--calico);
}

.hs-deck__tab .hs-pill__label-hover {
  display: inline-block;
  color: var(--ink);
}

.hs-deck__tab:hover .hs-pill__circle,
.hs-deck__tab:focus-visible .hs-pill__circle {
  transform: translateX(-50%) scale(1.2);
  transition-duration: 0.3s;
}

.hs-deck__tab:hover .hs-pill__label,
.hs-deck__tab:focus-visible .hs-pill__label {
  transform: translateY(calc(-1 * var(--hs-plate-h) - 8px));
  transition-duration: 0.3s;
}

.hs-deck__tab:hover .hs-pill__label-hover,
.hs-deck__tab:focus-visible .hs-pill__label-hover {
  transform: translateY(0);
  opacity: 1;
  transition-duration: 0.3s;
}

.hs-deck__tab:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

.hs-deck__count {
  padding: 10px 14px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.14em;
  color: var(--thread);
}

/* Entries — stacked, one showing; the turn is Stepper's transition. */
.hs-deck__slides {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.hs-deck__slide {
  position: absolute;
  inset: 0;
  display: none;
}

.hs-deck__slide.is-active,
.hs-deck__slide.is-out {
  display: block;
}

@keyframes hs-slide-in-next {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hs-slide-in-prev {
  from { opacity: 0; transform: translate3d(-40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hs-slide-out-next {
  to { opacity: 0; transform: translate3d(-24px, 0, 0); }
}

@keyframes hs-slide-out-prev {
  to { opacity: 0; transform: translate3d(24px, 0, 0); }
}

.hs-deck__slide.is-active {
  animation: hs-slide-in-next 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hs-deck[data-dir="prev"] .hs-deck__slide.is-active {
  animation-name: hs-slide-in-prev;
}

.hs-deck__slide.is-out {
  animation: hs-slide-out-next 0.3s ease-in both;
  pointer-events: none;
}

.hs-deck[data-dir="prev"] .hs-deck__slide.is-out {
  animation-name: hs-slide-out-prev;
}

/* Entry type */
.hs-deck__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.hs-deck__title em {
  font-style: italic;
  color: var(--terracotta);
}

.hs-deck__desc {
  margin: 0 0 var(--s-5);
  max-width: 62ch;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--thread);
  text-wrap: pretty;
}

/* AnimatedList: items land one after another as the entry arrives. */
@keyframes hs-item {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.hs-deck__slide.is-active .hs-deck__list > li,
.hs-deck__slide.is-active .hs-deck__col,
.hs-deck__slide.is-active .hs-deck__row,
.hs-deck__slide.is-active .hs-step,
.hs-deck__slide.is-active .hs-deck__aside > * {
  animation: hs-item 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(140ms + var(--i, 0) * 100ms);
}

/* service: list | aside */
.hs-deck__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-6);
  align-items: start;
}

.hs-deck__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.hs-deck__list > li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-15);
  line-height: 1.45;
  color: var(--ink);
}

.hs-deck__list > li svg {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  color: var(--terracotta);
}

.hs-deck__aside {
  display: grid;
  gap: var(--s-4);
}

.hs-deck__lands {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  background: var(--chalk);
}

.hs-deck__lands > span {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.hs-deck__lands > p {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.hs-deck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hs-deck__chip {
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.hs-deck__proof {
  position: relative;
  margin: 0;
  padding-left: 24px;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--thread);
}

.hs-deck__proof svg {
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  color: var(--ink);
}

/* cards / people: columns on a seam */
.hs-deck__cols {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: var(--s-5);
}

.hs-deck__col {
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  min-width: 0;
}

.hs-deck__col > span {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.hs-deck__col > h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.hs-deck__col > p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--thread);
  text-wrap: pretty;
}

.hs-deck__col > .hs-deck__chips {
  margin-top: var(--s-3);
}

.hs-deck__col > ul {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.hs-deck__col > ul > li {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.hs-deck__col > ul > li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  margin: 0 8px 4px 0;
  background: var(--terracotta);
}

/* facts: the questions that take three meetings, as rows */
.hs-deck__rows {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--hairline);
}

.hs-deck__row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--s-5);
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}

.hs-deck__row > dt {
  margin: 0;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--thread);
}

.hs-deck__row > dd {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* steps: Stepper's track — numbered plates and a connector that fills to
   the step in hand — with each step's text under its plate. */
.hs-steps {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--s-5);
}

.hs-step {
  position: relative;
  min-width: 0;
  cursor: default;
}

.hs-step__track {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  margin-bottom: var(--s-4);
}

.hs-step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--ink);
  background: var(--chalk);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hs-step__line {
  position: relative;
  flex: 1;
  height: 1px;
  margin-left: 8px;
  background: var(--hairline);
  overflow: hidden;
}

.hs-step__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hs-step:last-child .hs-step__line {
  display: none;
}

.hs-step.is-done .hs-step__no,
.hs-step.is-on .hs-step__no {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--chalk);
}

.hs-step.is-done .hs-step__line::after {
  transform: scaleX(1);
}

.hs-step > h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: 1.1;
  color: var(--ink);
}

.hs-step > p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--thread);
  text-wrap: pretty;
}

.hs-step > .hs-deck__chips {
  margin-top: var(--s-3);
}

/* a chip row under any entry */
.hs-deck__foot {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.hs-deck__foot > span {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--thread);
}

/* The hint under the action changes its meaning on a content page. */
.hs-hero--content .hs-hero__turn {
  position: absolute;
  z-index: 3;
  left: 30%;
  top: 76%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--thread);
  opacity: 0;
  transition: opacity 0.4s ease 0.6s;
  pointer-events: none;
}

.hs-hero--content .hs-hero__turn::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--thread);
  opacity: 0.55;
}

body.hs-chrome-on .hs-hero--content .hs-hero__turn {
  opacity: 1;
}

/* ── Short viewport ─────────────────────────────────────────────────── */

@media (max-height: 700px) and (min-width: 701px) {
  .hs-deck {
    top: 11%;
    bottom: 24%;
    gap: var(--s-5);
  }

  .hs-deck__desc {
    margin-bottom: var(--s-4);
  }

  .hs-deck__list {
    gap: var(--s-2);
  }
}

/* ── Phone ──────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  /* The plate gives the screen to the entries once the card is open. */
  body.hs-chrome-on .hs-hero--content .hs-hero__media {
    opacity: 0;
    inset: 5% 7% 38% 7%;
    width: 86%;
    height: 57%;
  }

  .hs-deck {
    left: 16px;
    right: 16px;
    top: 74px;
    bottom: 37%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--s-3);
  }

  .hs-deck__rail {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 0;
    border-bottom: 1px solid var(--hairline);
    align-self: stretch;
  }

  .hs-deck__rail::-webkit-scrollbar {
    display: none;
  }

  .hs-deck__tab {
    --hs-plate-h: 40px;
    flex: none;
    padding: 0 12px;
    border-bottom: 0;
    font-size: var(--fs-10);
  }

  .hs-deck__tab::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .hs-deck__tab[aria-selected="true"]::before {
    transform: scaleX(1);
  }

  .hs-deck__count {
    display: none;
  }

  .hs-deck__slide {
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-right: 4px;
    padding-bottom: 20px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
  }

  .hs-deck__title {
    font-size: 24px;
  }

  .hs-deck__desc {
    font-size: var(--fs-14);
    margin-bottom: var(--s-4);
  }

  .hs-deck__body,
  .hs-deck__cols,
  .hs-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  .hs-deck__list > li {
    font-size: var(--fs-14);
  }

  .hs-deck__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .hs-step__line {
    display: none;
  }

  .hs-hero--content .hs-hero__turn {
    display: none;
  }
}

/* ── Static (no JS) ─────────────────────────────────────────────────── */

.hs-hero--static .hs-deck {
  position: static;
  visibility: visible;
  opacity: 1;
  transform: none;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-6);
}

.hs-hero--static .hs-deck__rail {
  display: none;
}

.hs-hero--static .hs-deck__slides {
  overflow: visible;
}

.hs-hero--static .hs-deck__slide {
  position: static;
  display: block;
  margin-bottom: var(--s-7);
  animation: none;
}

.hs-hero--static .hs-hero__turn {
  display: none;
}

/* ── The footer’s social buttons, in the footline (mounted by chrome.js) ── */

.hs-hero__footline {
  align-items: center;
}

.hs-hero__socials {
  display: inline-flex;
  gap: 6px;
  margin-left: 4px;
}

.hs-hero__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.hs-hero__socials a:hover,
.hs-hero__socials a:focus-visible {
  border-color: var(--chalk);
  color: var(--chalk);
  outline: none;
}

.hs-hero__socials svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block;
}

.hs-hero--paper .hs-hero__socials a {
  border-color: var(--hairline);
  color: var(--ink);
}

.hs-hero--paper .hs-hero__socials a:hover,
.hs-hero--paper .hs-hero__socials a:focus-visible {
  border-color: var(--ink);
  color: var(--terracotta);
  background: var(--chalk);
}

/* An entry’s own plate arriving: the mount fades, swaps, and fades back. */
.hs-hero__media.is-swapping {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHONE — the content pages, decluttered.

   On a phone the entry already carries the page's title and sentence, so
   the lead under it only repeated them and pushed the action down. The
   entry takes that room instead.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .hs-hero--content .hs-hero__overlay-lead {
    display: none;
  }

  .hs-hero--content .hs-hero__overlay {
    padding-bottom: 100px;
  }

  .hs-hero--content .hs-deck {
    bottom: 26%;
  }

  /* The count is the only thing that says how many entries there are once
     the rail scrolls; keep it, small, at the row's end. */
  .hs-deck__count {
    display: flex;
    align-items: center;
    flex: none;
    padding: 0 0 0 12px;
  }
}