/* =========================================================================
   Magenta - components
   ========================================================================= */

/* ================================================================ Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.85em 1.6em;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-back),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-hard);
}

.btn:hover,
.btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* --m-deep, not --m: paper on the bright magenta is 3.8:1, which fails AA
   for label-sized text. Same hue, 5.96:1. */
.btn--magenta { background: var(--m-deep); color: var(--paper); }
.btn--ink     { background: var(--ink); color: var(--paper); }
.btn--paper   { background: var(--header-cta-bg); color: var(--header-cta-fg); }
.btn--outline { background: transparent; color: inherit; }
.btn--block   { width: 100%; justify-content: center; }

.btn--light {
  border-color: var(--paper);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--paper);
}
.btn--light:hover, .btn--light:focus-visible { box-shadow: 6px 6px 0 var(--paper); }

.btn span[aria-hidden] { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }

/* =============================================================== Stickers
   Die-cut labels dropped onto the page at an angle. The white keyline is the
   cut edge; the hard shadow is the lift off the paper. */
.sticker {
  display: inline-block;
  padding: 0.55em 1.05em;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  box-shadow: var(--shadow-hard);
  outline: 4px solid var(--paper);
  transition: transform var(--dur) var(--ease-back);
}

.sticker--magenta { background: var(--m-deep); color: var(--paper); }
.sticker--teal    { background: var(--teal-tint); }
.sticker--yellow  { background: var(--y); }
.sticker--rotate-l { transform: rotate(-4deg); }
.sticker--rotate-r { transform: rotate(3.5deg); }

.sticker--rotate-l:hover { transform: rotate(-1deg) scale(1.04); }
.sticker--rotate-r:hover { transform: rotate(1deg)  scale(1.04); }

/* Handwritten variant for annotations */
.sticker--hand {
  font-family: var(--font-hand);
  font-size: var(--fs-base);
  text-transform: none;
  letter-spacing: 0;
}

/* ================================================================== Tape
   A strip of masking tape. Torn edges via clip-path, translucent so the
   thing underneath still reads through it.

   The colour is warm neutral, not yellow: under multiply, yellow over the
   magenta panels resolves to red and reads as a rendering fault rather than
   as tape. Beige multiplies convincingly over both paper and magenta. */
.tape {
  position: absolute;
  width: 132px;
  height: 38px;
  background: rgba(228, 216, 194, 0.82);
  border-left: 1px dashed rgba(13, 13, 13, 0.18);
  border-right: 1px dashed rgba(13, 13, 13, 0.18);
  mix-blend-mode: multiply;
  clip-path: polygon(
    0 12%, 6% 0, 22% 9%, 46% 2%, 70% 10%, 88% 1%, 100% 11%,
    100% 88%, 84% 99%, 62% 91%, 38% 100%, 16% 90%, 4% 100%, 0 87%
  );
  pointer-events: none;
}

/* =============================================================== Marquee */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-5);
  padding-right: var(--sp-5);
  animation: marquee-scroll 32s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 0.9rem + 3vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}

.marquee__sep { color: var(--y); font-size: 0.6em; }

.marquee--band {
  /* --m-deep: the yellow separators on the bright magenta measured 3.61:1.
     Same hue, and the separators clear AA at 5.66:1. */
  background: var(--m-deep);
  color: var(--paper);
  border-block: var(--border);
  padding-block: var(--sp-4);
}

/* =========================================================== Brand rule
   Three flat bands in the studio's colours. This replaced a CMYK control
   strip and a set of registration crosses - devices borrowed from press
   production, which is not what this studio does. */
.brand-rule { display: flex; height: 6px; width: 100%; }
.brand-rule__band { flex: 1 1 auto; }
.brand-rule__band--m    { background: var(--m); }
.brand-rule__band--teal { background: var(--teal); }
.brand-rule__band--y    { background: var(--y); }

/* ============================================================ Brand blob
   The organic shape every icon and sticker in the kit sits on. Decorative,
   always behind content, always tinted by a placement class. */
.blob {
  display: block;
  pointer-events: none;
  user-select: none;
}

/* =========================================================== Image slots
   The placeholder is a designed state, not an error state. Halftone ground,
   slot name in mono, and the shooting spec revealed on hover so anyone
   reviewing the page can read what still has to be photographed. */
.slot-img { width: 100%; height: 100%; object-fit: cover; }

.slot-ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  background-color: var(--m);
  background-image: radial-gradient(var(--ink) 1.6px, transparent 1.7px);
  background-size: 12px 12px;
  color: var(--paper);
  text-align: center;
  padding: var(--sp-5);
  isolation: isolate;
}

.slot-ph--4x5  { aspect-ratio: 4 / 5; }
.slot-ph--16x9 { aspect-ratio: 16 / 9; }
.slot-ph--1x1  { aspect-ratio: 1 / 1; }
.slot-ph--cut  { aspect-ratio: 3 / 4; background-color: var(--stock); color: var(--ink); }

.slot-ph__mark {
  position: absolute;
  inset: 10px;
  border: 1.5px dashed rgba(253, 254, 255, 0.55);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.slot-ph--cut .slot-ph__mark { border-color: rgba(13, 13, 13, 0.4); }

.slot-ph__id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  background: rgba(13, 13, 13, 0.22);
}

.slot-ph__spec {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: var(--sp-6);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.slot-ph:hover .slot-ph__spec,
.slot-ph:focus-within .slot-ph__spec { opacity: 0.97; }

@media (max-width: 700px) { .slot-ph__spec { display: none; } }

/* ================================================================== Cards */
.card-grid,
.work-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.work-card { position: relative; }

.work-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.work-card__media {
  position: relative;
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--stock);
  aspect-ratio: 4 / 5;
  transition: transform var(--dur) var(--ease-back), box-shadow var(--dur) var(--ease-out);
}

.work-card__media img { width: 100%; height: 100%; object-fit: cover; }

.work-card__link:hover .work-card__media,
.work-card__link:focus-visible .work-card__media {
  transform: translate(-4px, -4px) rotate(-0.6deg);
  box-shadow: var(--shadow-hard-lg);
}

.section--ink .work-card__media { border-color: var(--paper); }
.section--ink .work-card__link:hover .work-card__media { box-shadow: 8px 8px 0 var(--m); }

.work-card__body { padding-top: var(--sp-4); }

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.work-card__client { margin: var(--sp-1) 0 0; font-family: var(--font-hand); font-size: 1.15rem; color: var(--m); }
.section--ink .work-card__client { color: var(--y); }

.work-card__meta {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ==================================================================== Form */
.print-form {
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-hard-lg);
}

.print-form__row { margin-bottom: var(--sp-4); }

.print-form label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.print-form input,
.print-form select,
.print-form textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  color: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.print-form input:focus,
.print-form select:focus,
.print-form textarea:focus {
  outline: none;
  border-color: var(--m);
  box-shadow: 3px 3px 0 var(--m);
}

.print-form textarea { resize: vertical; min-height: 7rem; }

/* Honeypot - off-canvas rather than display:none, which some bots detect. */
.print-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.print-form__status {
  margin: var(--sp-4) 0 0;
  min-height: 1.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.print-form__status.is-ok    { color: var(--m-deep); }
.print-form__status.is-error { color: #C0392B; }

.print-form.is-sending { opacity: 0.6; pointer-events: none; }

/* ============================================================= Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 2px solid var(--ink);
  transition: transform var(--dur) var(--ease-out);
}

/* Only let the ground go translucent where the blur can actually pay for it.
   Without the blur, 92% magenta just shows page content ghosting through. */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .site-header {
    background: color-mix(in srgb, var(--header-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-block: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--header-fg);
  margin-right: auto;
}

/* The lockup is one piece of artwork with a cropped viewBox, so height is the
   only dimension worth setting - width follows the 3.09:1 ratio on its own.
   It carries a descending G and an ascending T, so it needs a touch more room
   than a plain wordmark of the same cap height would. */
.brand__logo {
  display: block;
  height: clamp(2.1rem, 1.55rem + 1.5vw, 2.75rem);
  width: auto;
}

.site-nav__list { display: none; gap: var(--sp-5); }

.site-nav__list a {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: var(--header-fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after { transform: scaleX(1); }

.site-header__cta { display: none; }
.site-header__rule { position: absolute; left: 0; right: 0; bottom: -6px; }

/* 44px minimum in both directions - it was 43x33, under the comfortable
   touch target on every platform guideline. */
.nav-toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.6rem;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  cursor: pointer;
}

.nav-toggle__bar { display: block; width: 20px; height: 2.5px; background: var(--ink); transition: transform var(--dur) var(--ease-out); }
/* Counted from the end, not the start. The button's first child is the
   screen-reader label, so :first-child never matched a bar and only the lower
   stroke ever rotated - the control showed a half-formed X. The two bars are
   always the last two children whatever precedes them. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-last-child(2) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child        { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: auto 0 0 0;
  top: 0;
  z-index: var(--z-nav);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-5);
  /* Top padding clears the header, which paints over this panel now that it
     carries the close control. overflow guards the case where a long menu on
     a short screen would otherwise centre itself off the top edge. */
  padding: calc(var(--sp-8) + 4rem) var(--sp-8) var(--sp-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--m);
  color: var(--paper);
}

.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: grid; gap: var(--sp-4); text-align: center; }

.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 7vw, 3.5rem);
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 960px) {
  .site-nav__list { display: flex; }
  .site-header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* ============================================================= Site footer */
.site-footer { background: var(--ink); color: var(--paper); position: relative; z-index: var(--z-base); }
.site-footer__bar { display: flex; }

.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-block: var(--sp-8);
}

@media (min-width: 800px) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr; }
}

/* Sized to land on the same cap height the wordmark had when it was live
   text, so replacing the type with artwork did not change how big the brand
   reads. That type was Anton at clamp(2.5rem, 1.5rem + 6vw, 6rem); Anton's
   caps measure 0.865em, and the cap band is 0.614 of this viewBox's height,
   so the lockup runs 1.408x the old font size - 56px tall at the small end,
   135px at the large. Driven by width (height x 3.086) so min() can cap it
   against the column without the aspect ratio drifting. */
.site-footer__logo {
  margin: 0 0 var(--sp-3);
}

.site-footer__logo .brand__logo {
  display: block;
  width: min(100%, clamp(10.9rem, 6.5rem + 26.1vw, 26.1rem));
  height: auto;
  color: var(--paper);
}

.site-footer__line { max-width: 34ch; opacity: 0.75; }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.site-footer__socials a { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer__list { display: grid; gap: var(--sp-3); }
.site-footer__list a { font-family: var(--font-mono); font-size: var(--fs-sm); text-decoration: none; }
.site-footer__list a:hover { color: var(--y); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(253, 254, 255, 0.18);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}

.site-footer__legal p { margin: 0; opacity: 0.7; }
/* --m-light on this ground: the bright magenta measures 2.98:1 against the
   footer's dark, well under AA for a link. */
.site-footer__credit a { color: var(--m-light); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.site-footer__credit a:hover { color: var(--y); }

/* Right-hand column of the footer's top row. That column holds only the
   footer menu, which is short or empty, so the badge fills space that was
   otherwise dead rather than competing with anything for it. */
.site-footer__aside {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
}

/* ============================================== Contact list (closing block) */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }

.contact-list__item { display: grid; gap: 0.2rem; }

.contact-list__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-list__value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  word-break: break-word;
}

a.contact-list__value:hover,
a.contact-list__value:focus-visible { color: var(--m-deep); }

.contact-map {
  margin-top: var(--sp-6);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
  line-height: 0;
}

.contact-map iframe { width: 100%; height: clamp(15rem, 12rem + 12vw, 22rem); border: 0; display: block; }

/* ================================================== Accessibility control
   Floating panel, bottom right. It adjusts the page for the visitor; it does
   not pretend to make the site compliant, which no overlay can do. The real
   accessibility work is in the markup and the colour choices. */
.a11y {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 90;
  display: grid;
  justify-items: end;
  gap: var(--sp-3);
}

.a11y__toggle {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-back),
              box-shadow var(--dur-fast) var(--ease-out);
}

.a11y__toggle:hover,
.a11y__toggle:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.a11y__toggle:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

/* Fills the button. The artwork is cropped to its ink in the partial, so
   the round button supplies the only breathing room it needs. */
.a11y__mark { width: 80%; height: 80%; display: block; }

.a11y__panel {
  width: min(20rem, calc(100vw - 2rem));
  padding: var(--sp-5);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-hard-lg);
}

.a11y__panel[hidden] { display: none; }

.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

.a11y__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.a11y__close {
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 0.25rem 0.5rem;
}

.a11y__list { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: var(--sp-3); }

.a11y__option { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }

.a11y__option input { margin-top: 0.28rem; width: 1.1rem; height: 1.1rem; accent-color: var(--m-deep); flex: none; }

.a11y__option-text { display: grid; gap: 0.1rem; }

.a11y__option-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.a11y__option-hint { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.4; }

.a11y__reset { width: 100%; justify-content: center; }

.a11y__note { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }

/* ------------------------------------------------- What the options change */
:root[data-a11y-text="on"] { font-size: 120%; }

:root[data-a11y-contrast="on"] {
  --ink: #000000;
  --ink-soft: #2A2A2A;
  --paper: #FFFFFF;
  --stock: #FFFFFF;
  --rule: rgba(0, 0, 0, 0.5);
}
:root[data-a11y-contrast="on"] .grain,
:root[data-a11y-contrast="on"] .blob,
:root[data-a11y-contrast="on"] .doodle { display: none; }
:root[data-a11y-contrast="on"] .slot-img--graphic { opacity: 0.5; }

:root[data-a11y-motion="on"] *,
:root[data-a11y-motion="on"] *::before,
:root[data-a11y-motion="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

:root[data-a11y-readable="on"] {
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-hand: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tracking-display: 0;
}
:root[data-a11y-readable="on"] body { letter-spacing: 0.012em; word-spacing: 0.08em; }

:root[data-a11y-links="on"] a { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================== WhatsApp contact bubble
   Stacked above the accessibility control in the same bottom-right column, so
   the two floating actions never overlap each other. */
.wa-bubble {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  /* Clears the accessibility button (3.75rem) plus its own offset and a gap. */
  bottom: calc(clamp(1rem, 0.5rem + 1.5vw, 2rem) + 3.75rem + var(--sp-3));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: var(--border);
  border-radius: 50%;
  background: #25D366;
  color: #06331A;
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-fast) var(--ease-back),
              box-shadow var(--dur-fast) var(--ease-out);
}

.wa-bubble:hover,
.wa-bubble:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.wa-bubble:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

@media (max-width: 480px) {
  .a11y__toggle { width: 3.25rem; height: 3.25rem; }
  .wa-bubble { width: 3.25rem; height: 3.25rem; bottom: calc(1rem + 3.25rem + var(--sp-3)); }
}