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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-ja);
  font-weight: var(--w-mid);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ja);
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.sec__inner, .foot__inner { padding-left: var(--pad-side); padding-right: var(--pad-side); }

.u-hidden { position: absolute; width: 0; height: 0; overflow: hidden; }

.u-skip {
  position: absolute; left: var(--s-4); top: calc(var(--s-4) * -4);
  background: var(--c-ink); color: var(--c-ink-rev);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font-size: var(--t-small); text-decoration: none; z-index: 10;
  transition: top var(--d-fast) var(--e-out);
}
.u-skip:focus { top: var(--s-4); }

.label {
  font-family: var(--f-en);
  font-size: var(--t-label);
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
  opacity: 0.62;
}

.rule { display: block; width: 5.5rem; height: 1px; background: var(--c-rule); margin-bottom: 0.9rem; }

.cat { display: inline-block; line-height: 0; }
.cat img { animation: cat-boil 0.8s steps(1) infinite; }

.cat--walk    img { animation-name: cat-tail-walk; }
.cat--stretch img { animation-name: cat-tail-stretch; }
.cat--lookup  img { animation-name: cat-tail-lookup; }

@keyframes cat-boil {
  0%   { filter: url(#warp0); }
  25%  { filter: url(#warp1); }
  50%  { filter: url(#warp2); }
  75%  { filter: url(#warp3); }
}
@keyframes cat-tail-walk {
  0%   { filter: url(#tail-walk-0); }
  25%  { filter: url(#tail-walk-1); }
  50%  { filter: url(#tail-walk-2); }
  75%  { filter: url(#tail-walk-3); }
}
@keyframes cat-tail-stretch {
  0%   { filter: url(#tail-stretch-0); }
  25%  { filter: url(#tail-stretch-1); }
  50%  { filter: url(#tail-stretch-2); }
  75%  { filter: url(#tail-stretch-3); }
}
@keyframes cat-tail-lookup {
  0%   { filter: url(#tail-lookup-0); }
  25%  { filter: url(#tail-lookup-1); }
  50%  { filter: url(#tail-lookup-2); }
  75%  { filter: url(#tail-lookup-3); }
}

@keyframes cat-tail-watch {
  0%   { filter: url(#tail-watch-0); }
  25%  { filter: url(#tail-watch-1); }
  50%  { filter: url(#tail-watch-2); }
  75%  { filter: url(#tail-watch-3); }
}

.hero { position: relative; }

.hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; align-items: flex-end;

  min-height: 100vh;
  min-height: 100svh;

  padding: var(--s-10) var(--pad-side) var(--s-section);
  background: var(--panel);
}

.hero__glow { position: absolute; inset: -14%; z-index: -3; pointer-events: none; }
.hero__glow::before,
.hero__glow::after {
  content: ''; position: absolute; inset: 0;
  will-change: transform, opacity;
  -webkit-mask-image: var(--glow-mask);
          mask-image: var(--glow-mask);
}

.hero__glow::before { background: var(--glow-a);
                      animation: hero-drift-a var(--d-drift-a) ease-in-out infinite alternate; }
.hero__glow::after  { background: var(--glow-b);
                      animation: hero-drift-b var(--d-drift-b) ease-in-out infinite alternate; }

@keyframes hero-drift-a {
  from { transform: translate3d(-8%, 0, 0); opacity: 0.32; }
  to   { transform: translate3d( 9%, 0, 0); opacity: 1; }
}
@keyframes hero-drift-b {
  from { transform: translate3d(10%, 0, 0); opacity: 0.95; }
  to   { transform: translate3d(-9%, 0, 0); opacity: 0.28; }
}

.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--shade);
}

.sec--surface,
.contact { position: relative; isolation: isolate; }

.hero__panel::after,
.sec--surface::before,
.contact::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain);
  mix-blend-mode: multiply;
}

.ripples {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.ripple {
  position: absolute;
  width: 20rem; height: 20rem; margin: -10rem 0 0 -10rem;
  border-radius: 50%;
  border: 2.5px solid hsl(0 0% 100% / 0.72);
  box-shadow: 0 0 0 2.5px hsl(196 55% 20% / 0.42);
  opacity: 0;
  animation: ripple-out var(--d-ripple) var(--e-read) forwards;
}

@keyframes ripple-out {
    0% { scale: 0.28; opacity: 0; }
   16% { opacity: 0.95; }
  100% { scale: 1;    opacity: 0; }
}

.hero__top {
  position: absolute; z-index: 1;
  top: var(--s-6); left: var(--pad-side); right: var(--pad-side);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5);
}
.hero__brand {
  font-family: var(--f-en);
  font-size: var(--t-small);
  letter-spacing: var(--ls-en);
}

.mark {
  display: inline-block;
  height: 2.9em; width: auto;
  vertical-align: -1.35em;
  margin-right: 0.55em;
}

.mark path {
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.brand__w {
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1.35; vertical-align: baseline;
}
.brand__w b {
  font-weight: var(--w-mid);
  font-size: var(--t-small);
  letter-spacing: 0.24em; margin-right: -0.24em;
}
.brand__w i {
  font-style: normal;
  font-weight: var(--w-normal);
  font-size: var(--t-fine);
  letter-spacing: 0.36em; margin-right: -0.36em;
  opacity: 0.72;
}
.hero__nav {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--s-3) var(--s-6);
}
.hero__nav a {
  font-size: var(--t-small); text-decoration: none;
  letter-spacing: 0.04em;
}

.swap { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; }
.swap__a, .swap__b {
  display: block;
  transition: translate var(--d-move) var(--e-quart),
              clip-path var(--d-move) var(--e-quart);
}
.swap__a { clip-path: inset(0); }
.swap__b { position: absolute; inset: 0;
           clip-path: inset(0 0 100%); translate: 0 130%; }

a:hover > .swap > .swap__a,
a:focus-visible > .swap > .swap__a,
button:hover .swap__a,
button:focus-visible .swap__a { clip-path: inset(100% 0 0); translate: 0 -130%; }

a:hover > .swap > .swap__b,
a:focus-visible > .swap > .swap__b,
button:hover .swap__b,
button:focus-visible .swap__b { clip-path: inset(0); translate: 0; }

.hero__copy { position: relative; margin-left: 26%; max-width: 34rem; color: var(--c-ink-rev); }

.hero__kicker { margin-bottom: var(--s-5); }
.hero__kicker::before {
  content: ''; display: inline-block;
  width: 2.4rem; height: 2px;
  margin-right: 0.9em;
  vertical-align: 0.28em;
  background: var(--c-turq);
}

.hero__catch {

  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  font-weight: var(--w-mid);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-body);
}
.hero__lead { margin-top: var(--s-5); font-size: var(--t-small); }

.hero__panel .label { opacity: 1; }

.hero__scroll {
  position: absolute; right: var(--pad-side); bottom: var(--s-6);
  color: var(--c-ink-rev);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}

.hero__line {
  display: block; width: 2px; height: 3.5rem;
  background: var(--c-turq); opacity: 0.95;
  transform-origin: top;
  animation: scroll-line 2.6s var(--e-out) infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0);   opacity: 0; }
  30%  { transform: scaleY(1);   opacity: 0.95; }
  70%  { transform: scaleY(1);   opacity: 0.95; }
  100% { transform: scaleY(1);   opacity: 0; }
}

.js .hero__copy > * {
  opacity: 0; transform: translateY(0.9rem);
  animation: hero-in var(--d-slow) var(--e-out) forwards;
}
.js .hero__kicker { animation-delay: 0.15s; }
.js .hero__catch  { animation-delay: 0.30s; }
.js .hero__lead   { animation-delay: 0.52s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

.sec { padding-top: var(--s-section); }
.sec--surface { background: var(--c-surface); padding-bottom: var(--s-section); }

.js .reveal.reveal--head { opacity: 1; transform: none; }

.sec__head {
  position: relative;
  display: grid; grid-template-columns: max-content auto;
  align-items: end; column-gap: 0;
}
.sec__head .rule { grid-column: 1 / -1; margin-bottom: var(--s-5); }

.sec__t {
  font-family: var(--f-en);

  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: var(--w-mid);
  letter-spacing: 0.05em;
  line-height: 0.92;

  color: var(--c-ink);
}

.sec__n {
  grid-column: 1; grid-row: 2; align-self: end; margin: 0 0 var(--s-2);
  font-family: var(--f-en); font-size: 0.875rem;
  letter-spacing: var(--ls-en); line-height: 1.4; opacity: 0.7;
}

.sec__t          { grid-column: 1; grid-row: 3; }

.sec__head .cat { grid-column: 2; grid-row: 2 / span 2; align-self: end;
                  margin-left: var(--s-4); margin-bottom: 0.6rem;
                  position: relative; top: var(--s-3); }

.js .reveal--head .rule {
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-zoom) var(--e-quart);
}
.js .reveal--head.is-in .rule { transform: scaleX(1); }

.js .reveal--head .sec__n { opacity: 0; translate: 0 6px; }
.js .reveal--head.is-in .sec__n {
  opacity: 0.7; translate: 0 0;
  transition: opacity var(--d-fade) linear 0.25s,
              translate 0.4s var(--e-quart) 0.25s;
}

.js .reveal--head .sec__t { opacity: 0; }
.js .reveal--head.is-in .sec__t {
  animation: head-stamp 0.42s var(--e-quart) 0.45s both,
             head-ink   0.42s steps(1)       0.45s both;
}
@keyframes head-stamp {
  from { opacity: 0; scale: 1.06; }
  40%  { opacity: 1; }
  to   { opacity: 1; scale: 1; }
}

@keyframes head-ink {
  0%   { filter: url(#s0); }
  55%  { filter: url(#s1); }
  72%  { filter: url(#s2); }
  86%  { filter: none; }
  100% { filter: none; }
}

.js .reveal--head .cat {
  opacity: 0; translate: 0 18px;
  transition: opacity var(--d-fade) linear,
              translate var(--d-zoom) var(--e-back);
  transition-delay: 0.62s;
}
.js .reveal--head.is-in .cat { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal--head.is-in .sec__t { animation-delay: 0s !important; }
  .js .reveal--head.is-in .sec__n,
  .js .reveal--head .cat          { transition-delay: 0s !important; }
}

.gallery {
  margin-top: var(--s-9);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10) var(--s-8);
}
.gallery:not(:has(.fr:not(.fr--empty))) { grid-template-columns: 1fr; }

.fr__link { display: block; text-decoration: none; color: inherit; }
.fr__link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 6px; }

.fr__box {
  display: block; position: relative;
  aspect-ratio: 100 / 72;
  width: 100%; max-width: 34rem; margin-inline: 0;
}

.fr__scr {
  position: absolute; overflow: hidden; background: var(--c-surface);
  left: 14%; top: 8.333%; width: 72%; height: 62.5%;
}
.fr__scr img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: scale var(--d-zoom) var(--e-quart);
}

.fr__ink {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  animation: cat-boil 0.8s steps(1) infinite;
}

.fr__ink rect, .fr__ink path {
  fill: none; stroke: var(--c-ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fr__plate { display: block; margin-top: var(--s-5); text-align: center;
             max-width: 34rem; }
.fr__title {
  display: block; margin-top: var(--s-2);
  font-size: var(--t-h3); font-weight: var(--w-mid);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
}

.fr__more {
  display: block; margin-top: var(--s-3);
  font-size: var(--t-small); letter-spacing: var(--ls-head);
  opacity: 0; translate: 0 6px;
  transition: opacity var(--d-fade) linear, translate var(--d-move) var(--e-quart);
}
.fr__more::after { content: ' →'; }

.fr__link:hover .fr__scr:not(.fr__scr--tour) img,
.fr__link:focus-visible .fr__scr:not(.fr__scr--tour) img,
.js .fr.is-in .fr__link:hover .fr__scr:not(.fr__scr--tour) img,
.js .fr.is-in .fr__link:focus-visible .fr__scr:not(.fr__scr--tour) img { scale: 1.06; }
.fr__link:hover .fr__more,
.fr__link:focus-visible .fr__more { opacity: 0.72; translate: 0 0; }

.fr--empty .fr__plate { opacity: 0.45; }

.js .fr.reveal { opacity: 1; transform: none; }
.js .fr .fr__scr img { clip-path: inset(100% 0 0 0); scale: 1.12; }
.js .fr.is-in .fr__scr img {
  clip-path: inset(0 0 0 0); scale: 1;
  transition: clip-path 0.72s var(--e-quart), scale 0.9s var(--e-quart);
}

.js .fr .fr__plate { opacity: 0; translate: 0 10px; }
.js .fr.is-in .fr__plate {
  opacity: 1; translate: 0 0;
  transition: opacity var(--d-fade) linear, translate var(--d-move) var(--e-quart);
  transition-delay: 0.34s;
}
.js .fr--empty.is-in .fr__plate { opacity: 0.45; }

.fr__scr--tour {
  --tour-shift: -74.711%;
}

.fr__scr--tour img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: auto; object-fit: fill;
  transition: translate var(--d-tour) var(--e-read);
}

.js .fr .fr__scr--tour img,
.js .fr.is-in .fr__scr--tour img {
  clip-path: none; scale: 1;
  transition: translate var(--d-tour) var(--e-read);
}
.js .fr .fr__scr--tour      { clip-path: inset(100% 0 0 0); }
.js .fr.is-in .fr__scr--tour {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.72s var(--e-quart);
}

.fr__link:hover .fr__scr--tour img,
.fr__link:focus-visible .fr__scr--tour img,
.js .fr.is-in .fr__link:hover .fr__scr--tour img,
.js .fr.is-in .fr__link:focus-visible .fr__scr--tour img { translate: 0 var(--tour-shift); }

@media (hover: none) {
  .js .fr.is-in .fr__scr--tour img {
    animation: fr-tour 13s var(--e-read) 1.2s 1 normal;
  }
}
@keyframes fr-tour {
   0%,   6% { translate: 0 0; }
  44%,  56% { translate: 0 var(--tour-shift); }
  94%, 100% { translate: 0 0; }
}

.able { margin-top: var(--s-8); }

.able__g {
  display: grid; grid-template-columns: 13rem 1fr;
  gap: var(--s-5) var(--s-8);
  border-top: var(--rule);
  padding: var(--s-7) 0;
}

.able__h { align-self: start; }

.able__i {
  display: block; width: 2.5rem; height: 2.5rem;
  overflow: visible;
  animation: cat-boil 0.8s steps(1) infinite;
}
.able__i path, .able__i circle {
  fill: none; stroke: var(--c-ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.able__h .label { margin-top: var(--s-4); }

.able__t {
  margin-top: var(--s-2);
  font-size: var(--t-h2); font-weight: var(--w-mid);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
}

.able__l { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-8); }

.able__l b {
  display: block;
  font-size: var(--t-body); font-weight: var(--w-mid);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
}

.able__l span {
  display: block; margin-top: var(--s-2);
  font-size: var(--t-small); line-height: var(--lh-head);
  opacity: 0.82;
}

.able__g--no {
  margin-top: var(--s-9);
  border: var(--rule);
  padding: var(--s-6) var(--s-7);
}

.opt__axis { margin-top: var(--s-8); font-size: var(--t-lead); }

.opt {
  margin-top: var(--s-6);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}

.opt__i {
  border: var(--rule);
  padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex; flex-direction: column;
}

.opt__n {
  font-family: var(--f-en); font-size: var(--t-h2);
  letter-spacing: var(--ls-en); line-height: 1;
  opacity: 0.62;
}

.opt__who {
  margin-top: var(--s-5);
  font-size: var(--t-body); font-weight: var(--w-mid);
  letter-spacing: var(--ls-head);
}
.opt__who .label { display: block; margin-bottom: var(--s-1); }

.opt__i h3 {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: var(--rule);
  font-size: var(--t-h3); font-weight: var(--w-mid);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
}
.opt__i > p:last-child { margin-top: var(--s-3); font-size: var(--t-body); }

.opt__keep {
  margin-top: var(--s-7);
  background: var(--c-surface);
  padding: var(--s-6) var(--s-6) var(--s-7);
}

#works,
#options { padding-bottom: var(--s-9); }
.opt__keep h3 {
  font-size: var(--t-h3); font-weight: var(--w-mid);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
}
.opt__keep p { margin-top: var(--s-3); font-size: var(--t-body); max-width: 46rem; }
.opt__note { font-size: var(--t-small); opacity: 0.78; }

@media (max-width: 1050px) {
  .able__l { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .opt { grid-template-columns: 1fr; }
  .opt__i { max-width: 34rem; }
}

.contact { background: var(--panel-b); padding-bottom: var(--s-section); }
.contact__inner { text-align: center; }

.contact h2,
.contact h1 {
  margin-top: var(--s-4);
  font-family: var(--f-en);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: var(--w-mid);
  letter-spacing: var(--ls-en);
  line-height: var(--lh-head);
}
.contact__lead { margin-top: var(--s-5); font-size: var(--t-small); }

.form { margin: var(--s-9) auto 0; max-width: 34rem; text-align: left; }

.form__todo {
  border-left: 2px solid var(--c-ink);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  font-size: var(--t-small); line-height: var(--lh-head);
  margin-bottom: var(--s-7);
}
.form__todo a { color: inherit; }

.form__pot {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form__msg {
  margin-bottom: var(--s-6);
  font-size: var(--t-small); line-height: var(--lh-head);
  border-left: 2px solid var(--c-ink);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
}
.form__msg:empty { display: none; }
.form__msg.is-ng { border-left-width: 4px; }
.form__msg a { color: inherit; }

.form__row { margin-bottom: var(--s-6); }
.form__row label { display: block; font-size: var(--t-small); padding-bottom: var(--s-2); }
.req {
  font-family: var(--f-en); font-size: var(--t-fine); letter-spacing: var(--ls-en);
  margin-left: var(--s-3); color: var(--c-accent);
}
.form input, .form textarea {
  width: 100%; font: inherit; font-size: var(--t-body); color: inherit;
  background: var(--c-paper);
  border: 0; border-bottom: var(--rule); border-radius: 0;
  padding: var(--s-3) var(--s-3);
  transition: background var(--d-mid) var(--e-out);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.form textarea { resize: vertical; }
.form__help { display: block; margin-top: var(--s-2); font-size: var(--t-fine); opacity: 0.7; }

.contact .req { color: var(--c-ink); }
.contact .form input:focus,
.contact .form textarea:focus { outline-color: var(--c-ink); }

.contact .form__help { opacity: 1; }

.contact--page { padding-top: var(--s-6); min-height: 100vh; }

.pagetop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5);
  text-align: left;
  margin-bottom: var(--s-10);
}
.pagetop__home { text-decoration: none; color: inherit; display: inline-block; }

.form__send { margin-top: var(--s-8); text-align: center; }

.nf__cat { display: block; margin: 0 0 var(--s-4); }
.nf__cat img { margin-inline: auto; }

.nf__code {
  font-family: var(--f-en); font-size: var(--t-label);
  letter-spacing: var(--ls-en); font-weight: var(--w-mid);
  opacity: 0.7; margin: 0 0 var(--s-2);
}

.nf__go  { margin-top: var(--s-8); }
.nf__go .btn { text-decoration: none; }

.nf .contact__lead { text-wrap: balance; }
.nf__alt { margin-top: var(--s-6); font-size: var(--t-small); text-wrap: balance; }
.nf__alt a { white-space: nowrap; }

.workhead { padding-top: var(--s-6); }
.work { padding-top: var(--s-10); padding-bottom: var(--s-section); }
.work__head { max-width: 44rem; }
.work__head h1 {
  margin-top: var(--s-2);
  font-size: var(--t-h2); font-weight: var(--w-mid);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
}
.work__note { margin-top: var(--s-5); font-size: var(--t-body); }

.work__shot { margin-top: var(--s-9); max-width: 45rem; }
.work__shot img { width: 100%; border: var(--rule); }
.work__shot figcaption { margin-top: var(--s-3); }

.work__win {
  display: block; height: 30rem; max-width: 45rem;
  overflow-y: auto; overflow-x: hidden;
  border: var(--rule);
}
.work__win img { border: 0; }

.work__pair { display: grid; grid-template-columns: 1fr auto; gap: var(--s-7); align-items: start; }
.work__shot--sp img { width: 100%; max-width: 15rem; }

.work__back { margin-top: var(--s-10); }

.send {
  position: relative;
  display: flex; justify-content: center;
  margin-top: var(--s-9);
}

.send__cat {
  position: absolute; z-index: 1;

  right: calc(50% + 100px); bottom: -42px;
  width: 128px; height: 140px;
  pointer-events: none;
}
.send__catimg {
  position: absolute; left: 0; top: 0; width: 128px; height: auto;
  animation: cat-boil 0.8s steps(1) infinite;
}

.send__catimg--body {
  animation-name: cat-tail-watch;
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 13.6%, 76.4% 15.6%, 68.9% 18.3%, 65.4% 21.9%, 61.7% 32.4%, 56.3% 38%,
    49.4% 35.3%, 46.5% 33.6%, 48.1% 41.8%, 48.9% 46.7%, 50.2% 51.6%, 51.2% 58.8%, 100% 58.4%,
    100% 100%, 0% 100%
  );
}

.send__catimg--head {
  transform-origin: 57% 57%;
  animation-name: cat-boil, cat-watch;
  animation-duration: 0.8s, 2s;
  animation-timing-function: steps(1), ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  clip-path: polygon(
    100% 12%, 76% 14%, 68% 17%, 64% 21%, 60.3% 31.6%, 56% 36.4%,
    50% 33.8%, 45.5% 32.4%, 46.5% 42%, 47.3% 47%, 48.6% 52%, 50.2% 60%, 100% 60%
  );
}

@keyframes cat-watch {
  from { rotate: -3.5deg; }
  to   { rotate:  3.5deg; }
}

.send:has(.send__btn:hover) .send__catimg--head,
.send:has(.send__btn:focus-visible) .send__catimg--head {
  animation-name: cat-boil, cat-watch-up;
}
@keyframes cat-watch-up {
  from { rotate: -5deg; }
  to   { rotate:  0deg; }
}

.send.is-track .send__catimg--head {
  animation-name: cat-boil;
  animation-duration: 0.8s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
  animation-direction: normal;
  rotate: var(--head-rot, 0deg);
  transition: rotate var(--d-track) var(--e-quart);
}

.send__btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
  position: relative;
}

.send__txt { font-size: var(--t-body); font-weight: var(--w-mid);
             letter-spacing: var(--ls-head); }

.send__ring {
  --ring-len: 289.03;
  position: relative; display: block;
  width: 160px; height: 160px;
  border-radius: 50%;
  overflow: hidden;
  transition: scale var(--d-zoom) var(--e-quart);
}

.send__circle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none;
  animation: ring-spin 30s linear infinite;
}

.send__circle circle { stroke: var(--c-ink); stroke-width: 1.06px; }

.send__circle { animation-name: ring-spin, cat-boil;
                animation-duration: 30s, 0.8s;
                animation-timing-function: linear, steps(1);
                animation-iteration-count: infinite, infinite; }
.send__dot   { stroke-dasharray: 2 3; transition: opacity 0.97s ease-in-out; }

.send__solid { stroke-dasharray: var(--ring-len) var(--ring-len);
               stroke-dashoffset: calc(var(--ring-len) * -1); }

.send__lines {
  position: absolute; inset: -40%; width: 180%; height: 180%;
  rotate: 14deg; opacity: 0;
  transition: opacity var(--d-fade) ease-out;
}
.send__lines line {
  stroke: var(--c-ink); stroke-width: 2px; stroke-linecap: round;
  stroke-dasharray: 50 50;
  animation: ring-stream 5s linear infinite;
  opacity: 0.18;
}

.send__lines line:nth-child(1) { animation-delay: -1.3s; }
.send__lines line:nth-child(2) { animation-delay: -2s; }
.send__lines line:nth-child(3) { animation-delay: -0.5s; }
.send__lines line:nth-child(4) { animation-delay: -1s; }
.send__lines line:nth-child(5) { animation-delay: -0.25s; }

.send__plane {

  position: absolute; top: 0; left: 0; width: 160px; height: 160px;
  display: grid; place-items: center; pointer-events: none;
  animation: plane-bob 2s ease-in-out infinite alternate;
  transition: scale var(--d-zoom) var(--e-quart);
}
.send__planei { display: block; width: 30%; }
.send__planei svg { display: block; width: 100%; height: auto; overflow: visible; }

.send__planei svg { animation: cat-boil 0.8s steps(1) infinite; }
.send__planei path {
  fill: none; stroke: var(--c-ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@keyframes ring-spin   { to { rotate: 1turn; } }
@keyframes ring-stream { to { stroke-dashoffset: -100px; } }
@keyframes plane-bob   { from { translate: 0 -6%; } to { translate: 0 6%; } }

.send__btn:hover .send__ring,
.send__btn:focus-visible .send__ring { scale: 1.25; }
.send__btn:hover .send__plane,
.send__btn:focus-visible .send__plane { scale: 0.85; }
.send__btn:hover .send__lines,
.send__btn:focus-visible .send__lines { opacity: 1; }
.send__btn:hover .send__dot,
.send__btn:focus-visible .send__dot { opacity: 0; }
.send__btn:hover .send__solid,
.send__btn:focus-visible .send__solid {
  animation: ring-draw 1.8s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes ring-draw {
  from { stroke-dashoffset: calc(var(--ring-len) * -1); rotate: 0turn; }
  to   { stroke-dashoffset: calc(var(--ring-len) * -2); rotate: 1turn; }
}

.send__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 24px; }

.btn {
  display: inline-block; margin-top: var(--s-4);
  font: inherit; font-size: var(--t-small); color: inherit;
  background: var(--c-paper);
  border: var(--rule); border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-8);
  cursor: pointer;
  transition: background var(--d-mid) var(--e-out), color var(--d-mid) var(--e-out);
}
.btn:hover { background: var(--c-ink); color: var(--c-ink-rev); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--c-paper); color: inherit; }

.foot { border-top: var(--rule); }
.foot__inner {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  padding-top: var(--s-6); padding-bottom: var(--s-6);
}
.foot__name { font-size: var(--t-small); }
.foot__copy { font-family: var(--f-en); font-size: var(--t-fine); letter-spacing: var(--ls-en); opacity: 0.7; }

.foot__mail { font-family: var(--f-en); font-size: var(--t-small); letter-spacing: 0.04em; }
.foot__mail a { color: inherit; }

.js .reveal { opacity: 0; transform: translateY(55px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-fade) linear,
              transform var(--d-zoom) var(--e-back);
}

.js .reveal:nth-child(2)  { transition-delay: calc(var(--d-stagger) * 1); }
.js .reveal:nth-child(3)  { transition-delay: calc(var(--d-stagger) * 2); }
.js .reveal:nth-child(4)  { transition-delay: calc(var(--d-stagger) * 3); }

.able__g { position: relative; }
.js .able__g::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--c-rule);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-zoom) var(--e-quart);
}
.js .able__g.is-in::before { transform: scaleX(1); }

.js .able__g { border-top-color: transparent; }

.js .able__g--no::before { content: none; }
.js .able__g--no { border-top-color: var(--c-rule); }

@media (max-width: 768px) {


  .send__ring { width: 132px; height: 132px; }
  .send__plane { width: 132px; height: 132px; }
  .send__cat {
    right: calc(50% + 62px); bottom: -30px;
    width: 96px; height: 105px;
  }
  .send__catimg { width: 96px; }

  .hero__top { position: static; flex-direction: column; align-items: flex-start;
               gap: var(--s-3); }
  .hero__nav { justify-content: flex-start; gap: var(--s-3) var(--s-5); }


  .hero__nav a { position: relative; }
  .hero__nav a::after {
    content: ''; position: absolute; inset: -12px -6px;
  }


  .hero__panel {
    min-height: 34rem;
    display: block;
    padding: var(--s-6) var(--pad-side) var(--s-10);
  }


  .hero__copy { margin-left: 0; max-width: none;
                margin-top: calc(var(--s-10) + var(--s-7)); }
  .hero__line { height: 2.5rem; }

  .gallery { grid-template-columns: 1fr; gap: var(--s-9); }


  .able__g { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6) 0; }

  .able__l { grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-7); }
  .able__g--no { margin-top: var(--s-7); padding: var(--s-5); }



  .able__h:has(.able__i) {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; column-gap: var(--s-4);
  }
  .able__h:has(.able__i) .able__i { grid-column: 2; grid-row: 1 / span 2; }
  .able__h:has(.able__i) .label   { margin-top: 0; align-self: end; }
  .able__h:has(.able__i) .able__t { margin-top: 0; align-self: start; }


  .opt { grid-template-columns: 1fr; gap: var(--s-4); }
  .opt__i { padding: var(--s-5); }
  .opt__keep { padding: var(--s-5) var(--s-5) var(--s-6); }

  .fr__more { opacity: 0.72; translate: 0 0; }



  .sec__n { font-size: 0.8125rem; }
  .sec__head .cat { margin-left: var(--s-3); }


  .work__pair { grid-template-columns: 1fr; gap: var(--s-8); }
  .work__win { height: 22rem; }


  .foot__inner { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

.u-sp { display: none; }
@media (max-width: 768px) { .u-sp { display: inline; } }

@media (max-width: 360px) {
  .hero__nav { gap: var(--s-3) var(--s-4); }
}